记：vue基于vue-seamless-scroll的无缝滚动实例

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，