解决vue-seamless-scroll插件行点击失效的问题

• vue-seamless-scroll实现无缝滚动的效果，是通过复制dom，追加上去实现的，这样就导致你直接把click事件绑定到seamless-scroll-item，复制的dom就有点击失效
• 这里我们用事件代理区实现
• 给所有的seamless-scroll-item包一层容器seamless-scroll-content
• 给这个容器绑定点击事件scrollClickHandler
• :data-obj="JSON.stringify(item)"就是处理点击参数的

<vue-seamless-scroll class="seamless-scroll" :data="dataList" :class-option="classOption">
  <div class="seamless-scroll-content" @click="scrollClickHandler">
    <div
      class="seamless-scroll-item"
      :data-obj="JSON.stringify(item)"
      v-for="(item, index) in dataList"
      :key="index"
    >
      {{ item.name }}
    </div>
  </div>
</vue-seamless-scroll>

• vue-seamless-scroll的配置项

computed: {
  classOption() {
    //大屏滚动配置参数
    return {
      step: 0.3, // 数值越大速度滚动越快
      limitMoveNum: 3, // 开始无缝滚动的数据量 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)
    };
  },
},

• scrollClickHandler方法
• 这里我们每条item里面可能会有多个元素，也就是点的不一定是item，也可能是item的子元素，所以这里写了一个while循环，去实现

scrollClickHandler(e) {
  try {
    let data;
    let target = e.target;
    while (target && !data) {
      if (target?.dataset?.obj) {
        data = JSON.parse(target.dataset?.obj || "{}");
      }
      target = target.parentElement;
    }
    console.log(data); // 你的item参数
  } catch (error) {
    console.log("JSON parse error>>>>>>>>>>>>>>>>>>", error);
  }
},