vue-seamless-scroll 滚动插件的使用及循环的列表点击事件不生效的解决方案

vue-seamless-scroll是vue当前使用最多的一个列表循环滚动插件

1、vueSeamlessScroll 的局部安装及引用

// vueSeamlessScroll 的安装
npm install vue-seamless-scroll --save


// 引用的方式有两种

// 第一种：在 main.js 中进行全局的引用
import vueSeamlessScroll from 'vue-seamless-scroll'
Vue.use(vueSeamlessScroll)

// 第二种，在所需的文件中引入
import vueSeamlessScroll from 'vue-seamless-scroll'

2、 列表循环滚动插件在文件中的使用

html 部分

<div class="content">
  <vue-seamless-scroll
    :data="datas"
    :class-option="defaultOption(datas)"
    style="overflow: hidden"
    @click.native="getDom($event)"
  >
    <div
      class="list"
      v-for="(item, index) in datas"
      :key="index"
    >
      <div class="item" :id="index" :data-obj="JSON.stringify(item)">
        <div class="avatar">
          <img :src="item.imageUrl" />
        </div>
        <div class="info">
          <div class="name">
            {{ item.title }}
          </div>
          <div class="time">
            {{ item.createdTime }}
          </div>
        </div>
      </div>
    </div>
  </vue-seamless-scroll>
</div>

js 部分

methods: {
  defaultOption(val) {
    return {
        step: val.length > 2 ? 0.2 : 0, // 数值越大速度滚动越快
        limitMoveNum: val.length > 2 ? val.length : 3, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        // singleHeight: window.innerHeight * 0.1, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1500, // 单步运动停止的时间(默认值1000ms)
      };
    },
}

使用中碰到的问题：

1、当数据的长度没有达到所需数据长度时，数据列表开始滚动

解决方案 >>>

​ 通过对该插件中的 step 【滚动速度】进行数组长度的判断， 当数组的长度达到我们所需的长度时就开始进行滚动，反之速度为0

​ 通过对该插件中的 limitMoveNum 【开始滚动的数据量】进行判断，使得数组长度达到所需的时候进行滚动

step: val.length > 2 ? 0.2 : 0, // 数值越大速度滚动越快
limitMoveNum: val.length > 2 ? val.length : 3, // 开始无缝滚动的数据量 this.dataList.length

2、当我们对 center 中的列表项进行单个点击事件的写入时，循环的列表项无法触发点击事件

产生这种 BUG 的原因

​ 因为vue-seamless-scroll中间包裹的dom复制渲染，没有带上dom的点击事件导致

解决方案 >>> 使用事件委托

html部分

js部分