vue无限滚动插件（ vue-seamless-scroll）

npm安装vue-seamless-scroll

npm install vue-seamless-scroll --save

使用

<vue-seamless-scroll :data="data" class="seamless-warp" :class-option="classOption">
    <div>滚动的内容</div>
</vue-seamless-scroll>

  .seamless-warp {
    width: 100%;
    height: 200px;
    overflow: hidden;
  }

引入组件并配置参数

import vueSeamlessScroll from 'vue-seamless-scroll' 

  data:{
    data:[]
  },
  components: {
    vueSeamlessScroll
  },
  computed: {
    classOption() {
        return {
          step: 0.5, // 数值越大速度滚动越快
          limitMoveNum: 2, // 开始无缝滚动的数据量
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动)
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动)
          waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
        }
    }
  },

解决v-for循环时点击事件无效示例：

<div class="eventBox" @click="clickProps($event)">
  <vue-seamless-scroll :data="eventData" :class-option="classOption">
    <div class="flex eventText" v-for="(item,index) in eventData">
        <div :data-index="index">{{item}}</div>
    </div>
  </vue-seamless-scroll>
</div>

clickProps(e) {
    let index= e.target.dataset.index;
},