chenxuan0000 / vue-seamless-scroll Goto Github PK
View Code? Open in Web Editor NEW:beginner:A simple, seamless scrolling for Vue.js vue无缝滚动component
Home Page: https://chenxuan0000.github.io/vue-seamless-scroll/
License: MIT License
:beginner:A simple, seamless scrolling for Vue.js vue无缝滚动component
Home Page: https://chenxuan0000.github.io/vue-seamless-scroll/
License: MIT License
建议加上一个判断,当数据条数不足的时候,所有的参数置空,不参加滚动
请问用rem设置singleHeight如何才能生效。
需要给容器内的li绑定点击事件,但是复制的li没有办法绑定,怎么解决
我的配置如下:
{
hoverStop: false,
limitMoveNum: 2,
singleHeight: 24,
waitTime: 2500
}
当动态修改 data 只剩下 1 条数据时,动画没有停下来
能否监听滚动完一次后,执行一个自定义事件?
在vue
中配置step参数,貌似没有起作用,设置成1或者100 或者0 滚动速度没变
在页面缓存的情况下,首次加载页面滚动效果是正常的,点击发生跳转到子路由,从子路由跳转回去,无法再滚动。
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside
, or missing . Bailing hydration and performing full client-side render.
使用websocket 往data 绑定的数组中动态push新数据,高度计算错误,后来发现是组件里监听数据的的$watch的oldvalue和newValue在监听数组时是一样的,触发不了
if (!arrayEqual(newData, oldData)) { this._cancle() this._initMove(this.resize) }
取消判断条件后 正常
深复制的时候 点击事件没有复制过去, 总有视图大小范围里的控件点击动作无效
有56条数据,内存打快照,内存一直在涨
optionSingleHeight() {
return {
step: 2,
switchDelay: 0,
limitMoveNum:7,
hoverStop: true,
direction: 1,
openWatch: false,
singleHeight: 100
};
}
以上是配置项,但是进入页面的时候不会自动滚动,要先把鼠标挪上去,再移开,才会滚动。请问是配置有什么问题吗。谢谢
limitMoveNum参数设置无效 还是默认5条数据滚动
无缝滚动,能否直接以插件的形式来使用呢?
这样在需要用无缝滚动的时候,我就不用单独为这个区域再创建一个组件了。
请轩大神支持下!
当direction设置为2时,正常情况下应该是水平无缝滚动,可是却无法实现。水平情况下本来两个div应该是水平摆放的,可是出来的效果却是垂直的...请问有什么解决方案吗?谢谢。
#error
Uncaught TypeError: Cannot read property 'offsetHeight' of undefined
at eval (vue-seamless-scroll.min.js?919b:1)
(anonymous) @ vue-seamless-scroll.min.js?919b:1
requestAnimationFrame (async)
_move @ vue-seamless-scroll.min.js?919b:1
boundFn @ vue.esm.js?efeb:189
(anonymous) @ vue-seamless-scroll.min.js?919b:1
requestAnimationFrame (async)
_move @ vue-seamless-scroll.min.js?919b:1
boundFn @ vue.esm.js?efeb:189
(anonymous) @ vue-seamless-scroll.min.js?919b:1
requestAnimationFrame (async)
_move @ vue-seamless-scroll.min.js?919b:1
boundFn @ vue.esm.js?efeb:189
(anonymous) @ vue-seamless-scroll.min.js?919b:1
requestAnimationFrame (async)
_move @ vue-seamless-scroll.min.js?919b:1
boundFn @ vue.esm.js?efeb:189
(anonymous) @ vue-seamless-scroll.min.js?919b:1
requestAnimationFrame (async)
_move @ vue-seamless-scroll.min.js?919b:1
boundFn @ vue.esm.js?efeb:189
(anonymous) @ vue-seamless-scroll.min.js?919b:1
requestAnimationFrame (async)
_move @ vue-seamless-scroll.min.js?919b:1
boundFn @ vue.esm.js?efeb:189
(anonymous) @ vue-seamless-scroll.min.js?919b:1
requestAnimationFrame (async)
_move @ vue-seamless-scroll.min.js?919b:1
boundFn @ vue.esm.js?efeb:189
(anonymous) @ vue-seamless-scroll.min.js?919b:1
requestAnimationFrame (async)
_move @ vue-seamless-scroll.min.js?919b:1
boundFn @ vue.esm.js?efeb:189
(anonymous) @ vue-seamless-scroll.min.js?919b:1
requestAnimationFrame (async)
_move @ vue-seamless-scroll.min.js?919b:1
boundFn @ vue.esm.js?efeb:189
(anonymous) @ vue-seamless-scroll.min.js?919b:1
requestAnimationFrame (async)
_move @ vue-seamless-scroll.min.js?919b:1
boundFn @ vue.esm.js?efeb:189
(anonymous) @ vue-seamless-scroll.min.js?919b:1
requestAnimationFrame (async)
_move @ vue-seamless-scroll.min.js?919b:1
boundFn @ vue.esm.js?efeb:189
(anonymous) @ vue-seamless-scroll.min.js?919b:1
requestAnimationFrame (async)
_move @ vue-seamless-scroll.min.js?919b:1
boundFn @ vue.esm.js?efeb:189
(anonymous) @ vue-seamless-scroll.min.js?919b:1
requestAnimationFrame (async)
_move @ vue-seamless-scroll.min.js?919b:1
boundFn @ vue.esm.js?efeb:189
(anonymous) @ vue-seamless-scroll.min.js?919b:1
requestAnimationFrame (async)
_move @ vue-seamless-scroll.min.js?919b:1
boundFn @ vue.esm.js?efeb:189
(anonymous) @ vue-seamless-scroll.min.js?919b:1
requestAnimationFrame (async)
_move @ vue-seamless-scroll.min.js?919b:1
boundFn @ vue.esm.js?efeb:189
(anonymous) @ vue-seamless-scroll.min.js?919b:1
requestAnimationFrame (async)
_move @ vue-seamless-scroll.min.js?919b:1
boundFn @ vue.esm.js?efeb:189
(anonymous) @ vue-seamless-scroll.min.js?919b:1
requestAnimationFrame (async)
_move @ vue-seamless-scroll.min.js?919b:1
boundFn @ vue.esm.js?efeb:189
(anonymous) @ vue-seamless-scroll.min.js?919b:1
requestAnimationFrame (async)
_move @ vue-seamless-scroll.min.js?919b:1
boundFn @ vue.esm.js?efeb:189
(anonymous) @ vue-seamless-scroll.min.js?919b:1
requestAnimationFrame (async)
_move @ vue-seamless-scroll.min.js?919b:1
boundFn @ vue.esm.js?efeb:189
(anonymous) @ vue-seamless-scroll.min.js?919b:1
requestAnimationFrame (async)
_move @ vue-seamless-scroll.min.js?919b:1
boundFn @ vue.esm.js?efeb:189
(anonymous) @ vue-seamless-scroll.min.js?919b:1
requestAnimationFrame (async)
_move @ vue-seamless-scroll.min.js?919b:1
boundFn @ vue.esm.js?efeb:189
(anonymous) @ vue-seamless-scroll.min.js?919b:1
requestAnimationFrame (async)
_move @ vue-seamless-scroll.min.js?919b:1
boundFn @ vue.esm.js?efeb:189
(anonymous) @ vue-seamless-scroll.min.js?919b:1
requestAnimationFrame (async)
_move @ vue-seamless-scroll.min.js?919b:1
boundFn @ vue.esm.js?efeb:189
(anonymous) @ vue-seamless-scroll.min.js?919b:1
requestAnimationFrame (async)
_move @ vue-seamless-scroll.min.js?919b:1
boundFn @ vue.esm.js?efeb:189
(anonymous) @ vue-seamless-scroll.min.js?919b:1
requestAnimationFrame (async)
_move @ vue-seamless-scroll.min.js?919b:1
boundFn @ vue.esm.js?efeb:189
(anonymous) @ vue-seamless-scroll.min.js?919b:1
requestAnimationFrame (async)
_move @ vue-seamless-scroll.min.js?919b:1
boundFn @ vue.esm.js?efeb:189
(anonymous) @ vue-seamless-scroll.min.js?919b:1
requestAnimationFrame (async)
_move @ vue-seamless-scroll.min.js?919b:1
boundFn @ vue.esm.js?efeb:189
(anonymous) @ vue-seamless-scroll.min.js?919b:1
requestAnimationFrame (async)
_move @ vue-seamless-scroll.min.js?919b:1
boundFn @ vue.esm.js?efeb:189
(anonymous) @ vue-seamless-scroll.min.js?919b:1
requestAnimationFrame (async)
_move @ vue-seamless-scroll.min.js?919b:1
boundFn @ vue.esm.js?efeb:189
(anonymous) @ vue-seamless-scroll.min.js?919b:1
requestAnimationFrame (async)
_move @ vue-seamless-scroll.min.js?919b:1
boundFn @ vue.esm.js?efeb:189
(anonymous) @ vue-seamless-scroll.min.js?919b:1
requestAnimationFrame (async)
_move @ vue-seamless-scroll.min.js?919b:1
boundFn @ vue.esm.js?efeb:189
(anonymous) @ vue-seamless-scroll.min.js?919b:1
requestAnimationFrame (async)
_move @ vue-seamless-scroll.min.js?919b:1
boundFn @ vue.esm.js?efeb:189
(anonymous) @ vue-seamless-scroll.min.js?919b:1
#template
<vue-seamless-scroll :data="rewardList" :class-option="seamlessOption" class="warp">
<ul class="item">
<li v-for="(item, index) in rewardList" :key="index">
<p class="name">{{ item.nickname }}</p>
<p class="reward-type">{{ `${item.amount}${rewardTypeList[item.type]}` }}</p>
<!-- <p class="cell-phone">{{ item.cellPhone }}</p> -->
</li>
</ul>
</vue-seamless-scroll>
#seamlessOption
seamlessOption: {
step: 0.25,
limitMoveNum: 5,
},
#version
"dependencies": {
"alloyfinger": "^0.1.11",
"clipboard": "^1.7.1",
"exif-js": "^2.3.0",
"fastclick": "^1.0.6",
"vue": "^2.5.2",
"vue-resource": "^1.3.4",
"vue-router": "^3.0.1",
"vue-seamless-scroll": "^1.0.5",
"vuex": "^2.1.1",
"vuex-i18n": "^1.3.1",
"vux": "^2.2.0"
},
现在第一条是点不到的,可以提供一个钩子点击时返回当前显示的那一条的index吗
get classOption() {
return {
step: 1,
singleHeight: 1,
isSingleRemUnit: true,
limitMoveNum: this.scrollList.length,
openTouch: false,
waitTime: 2000
};
}
滚动一点都不流畅
例如以iPhone6的750px为标准,那只有iPhone6 的情况下可以正常实现一条一条的滚动,其他的都会无缝滚动且设置的时间也会失效
IE11下测试,不兼容,无法显示滚动列表数据。
比如打开演示网址:http://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default 就无法正确显示,干脆打不开。
就是 可以无缝滚动加 拖拽效果 可以上下拖拽
这个组件能否支持服务端渲染。或者dist目录包中单独提供SSR包
在1920*1080分辨率且不缩小屏幕的情况下可以点击跳转,但是缩小屏幕后,就没有效果
需求:当滚动元素为图片是,实现点击滚动小图展示大图。
实现:在img标签上添加@click方法
问题:原滚动列表有事件,拷贝的列表无事件,何解?
我现在使用后的问题:两个相同结构的组件,不同的Array,但是一个滚动一个不滚动,然后将不滚动的那个组件的 :data='Array'中的Array替换成了可以滚动的Array ,然后这个组件就开始滚动了。这个:data="Array"中的Array 的数组有一定的要求,还是一个页面不能使用多个这样的滚动组件
我mac开发只要切换到有引入你的vue-seamless-scroll的组件,马上cpu像疯了一样,温度慢慢飙升,直接到99度。不是夸张。希望大佬你能检查一下你的代码看看哪里是否还能优化。不能完成功能就忽略了性能问题
滚动的内容是一个占据一个块的时候,滚动是没有问题的,循环的时候,从1-10 1-10 1-10 ...;如果假设是两个列表占据一行时候,就会出现 1-10 1-8 1-10 这样的问题。应该是先求每个列表的高度,然后乘以总的个数,就是整个滚动的高度,但是当两个内容是在同一行的时候,就会出问题吧。还没看源码,如果说错了,请大神见谅哈!
能不能添加一个手动停止和开始的方法,调用方法马上停止或者开始
如题
后端传过来的图片长度不固定,就想为父级元素绑定一个动态style的宽度。结果无效
改为用setTimeout在所有组件渲染完成后拿宽度,成功解决
移动端布局用rem的话,singleHeight只能接收Nubmer就不太灵活了,希望能有对rem的支持^_^
在屏幕尺寸改变后,样式没有即时响应
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.