关于 vue-seamless-scroll 的问题采坑

项目场景：

本文描述了在引用 vue-seamless-scroll 的过程中遇到的一些常见问题

---

问题一描述

此插件在使用的过程中如果条数过少，要阻止循环滚动，不能够持续复制滚动

原因分析

此问题主要是因为插件自动复制了我们的一个列表，两个列表持续滚动，如下图所示

解决方案

给 class-option 的属性增加 limitMoveNum

设置成动态的，且根据何时显示何时初始化，因为我的页面里是个弹框，刚开始就初始化数据的话，滚动循环会不规律

动态设置 limitMoveNum

limitMoveNum: this.listData.length < 5 ? 5: this.listData.length

5是我显示条数的最多个数，多余就开始循环滚动

---

问题二描述

还有一个常见问题就是点击事件不管用

原因分析

原因同上，就是因为复制了两个相同的列表进行滚动，复制出来的那个列表并没有添加上点击事件

解决方案

思路就是 绑定了 data-obj 用字符串去传值 ，通过点击父元素，获取子元素的传值

<div @click="clickProps($event)">
   <vue-seamless-scroll
     :data="listData"
     class="seamless-warp"
     :class-option="optionStep"

   >
     <ul class="items">
       <li v-for="(item, index) in listData" :key="index" class="item" :hover="item.ggbt" :data-obj="JSON.stringify(item)" :id="index+1">
         {{ item.ggbt }}
       li>
     ul>
   vue-seamless-scroll>
div>

clickProps(event) {
    let item = JSON.parse(event.target.dataset.obj)
    this.fetchDetail(item.id)
 }