1、安装vue-seamless-scroll
npm install vue-seamless-scroll --save
2、引入组件
import vueSeamlessScroll from 'vue-seamless-scroll'
components: {
vueSeamlessScroll
},
3、配置参数
computed: {
defaultOption () {
return {
step: 0.4, // 数值越大速度滚动越快
limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
}
}
},
4、插件的使用
<vue-seamless-scroll :data="listData" :class-option="defaultOption" class="seamless-warp">
<ul>
<li v-for="(item,index) in listData" :key="index">
li>
ul>
vue-seamless-scroll>
最后就可以实现无缝对接滚动了
5、遇到的BUG
5.1 @click失效
<vue-seamless-scroll :data="listData" :class-option="defaultOption" class="seamless-warp">
<ul>
<li v-for="(item,index) in listData" :key="index" @click="clickload(item)">
</li>
</ul>
</vue-seamless-scroll>
当ul1中的数据未滚动完时,ul2 部分的click事件不起作用,无法实现功能
解决方法,通过 js事件委托
<vue-seamless-scroll :data="listData" :class-option="defaultOption" class="seamless-warp">
<ul @click="openDialog($event)">
<li v-for="(item,index) in listData" :key="index" :data-item="item">
</li>
</ul>
</vue-seamless-scroll>
当触发点击事件的时候,
事件里面event.target可以console.log打印出当前触发这个事件的子标签
data-id是自定义属性,因此我们获取的方法是dataset,