VueSeamlessScroll 无缝滚动点击事件不生效

在项目中使用了VueSeamlessScroll，实现了数据滚动，但是数据的点击事件，只有第一遍循环的时候生效，后面循环出来的数据都不生效，解决如下：

1、给外面div添加事件委托

 上代码

        <div class="broadcast-content-list" @click="viewRecords($event)">
          <VueSeamlessScroll :data="listData" h-168 of-hidden :class-option="classOption" ref="seamlessScroll">
            <div class="broadcast-content-list-item" v-for="(item, index) in listData" :key="index">
              <ul>
                <li leading-12 max-h-12 flex="~" space="x-2" class="listItem" :data="JSON.stringify(item)"
                  b="0 b-1 gray dashed" cursor="pointer">
                  <LazyTootip class="w-110px" :text="item.earlyWarnDate" />
                  <LazyTootip class="flex-1" :text="item.sevenOrgName" />
                  <LazyTootip class="flex-1" :text="item.nineOrgName" />
                  <LazyTootip class="w-22" :text="item.waringTypeName" />
                  <LazyTootip class="w-22" :text="item.txCode" />
                  <LazyTootip class="w-22" :text="item.txCodeName" />
                </li>
              </ul>
            </div>

          </VueSeamlessScroll>
        </div>
、、、
listData:[] //接收后端返回的数据

、、、
  computed: {
//这个是配置项
    classOption: function () {
      return {
        // step: 1, //步长 越大滚动速度越快
        limitMoveNum: 14, //启动无缝滚动最小数据量，默认是5，我这里需要展示14条数据
        hoverStop: true, //是否启用鼠标hover控制
        direction: 1, //1 往上 0 往下
        openWatch: true, //开启data实时监听
        singleHeight: 0, //单条数据高度有值hoverStop关闭
        waitTime: 1000 //单步停止等待时间
      }
    }
  }
methods:{
viewRecords(e) {
      const path = e.path || (e.composedPath && e.composedPath());
      let target = path.filter((r) => /listItem/.test(r.className));
      if (target.length) target = target[0];
      else return;
      const data = JSON.parse(target.getAttribute("data")); // 单项数据详情，点击那行数据的所有数据
      // 跳转详情页面
        let params
        if (data.waringTypeName === '线路停电预警') {
          params = {
            orgNo: data.nineOrgNo,
            date: data.value,
            lineNo: data.txCode,
            typeNum: '1',
          }
        }
        else if (
          data.waringTypeName === '台区停电预警'
          || data.waringTypeName === '台区低电压预警'
        ) {
          params = {
            orgNo: data.nineOrgNo,
            date: data.value,
            earlyWarnType: data.waringType,
            tgNo: data.txCode,
            typeNum: '2',
          }
        }
//这个回调函数，是因为这里报了一个错误加的，按正常写就行
        this.$router.push(
          {
            name: 'EarlyWarningDetail',
            params
          },()=>{}   
        );
    }
}

链接：https://www.cnblogs.com/zaijin-yang/p/16517702.html

2、查看配置

链接：vue大屏开发系列—列表无缝滚动之vue-seamless-scroll_鲸鱼姐的博客-CSDN博客

链接：vue的无缝滚动组件vue-seamless-scroll实例_limitmovenum_流氓也是种气质 _Cookie的博客-CSDN博客 

 3、跳转路由报错解决

this.$router.push({
   name: 'Cats',
 }, () => {})

链接：Vue路由导航报错：NavigationDuplicated: Avoided redundant navigation to current location解决方法_离奇6厘米的博客-CSDN博客

官网：组件配置 | vue-seamless-scroll