基于Vue的简单无缝滚动组件 支持上下左右无缝滚动,单步滚动,以及水平方向的手动切换
演示文档:https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default
安装依赖:
npm install vue-seamless-scroll --save
全局注册:
import Vue from 'vue'
import scroll from 'vue-seamless-scroll'
export default () => {
Vue.use(scroll)
}
局部注册:
import vueSeamless from 'vue-seamless-scroll'
export default {
components: {
vueSeamless
}
}
使用:
<vue-seamless-scroll :data="list" :class-option="classOption">
<ul class="scroll-item">
<li v-for="(item, index) in list" :key="index">
......
</li>
</ul>
</vue-seamless-scroll>
computed: {
classOption () {
return {
step: 2, // 数值越大速度滚动越快
limitMoveNum: 3, // 开启无缝滚动的数据量 设置(数值<=页面展示数据条数不滚)(超过页面展示条数滚动)
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 40,
waitTime: 2500 // 单行停顿时间(singleHeight,waitTime)
}
}
}