使用 vueSeamlessScroll 无限纵向滚动 以及点击事件生效

<template>
  <div
    @click="clickProps($event)"
  >
    <vue-seamless-scroll
      :data="List"
      class="seamless-warp"
      :class-option="optionSingleHeightTime"
    >
      <!-- 在需要添加点击事件的元素上绑定 :data-obj="JSON.stringify(item)" 否则事件无法触发且会抱错 -->
      <div
        class="item"
        v-for="(item, index) in List"
        :key="index"
        :data-obj="JSON.stringify(item)"
      >
      <div style="width:100px;height:100px;background:orange" :data-obj="JSON.stringify(item)">{{ item.name }}</div>
      </div>
    </vue-seamless-scroll>
  </div>

</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  name: 'test',
  components: {
    vueSeamlessScroll,
  },
  computed: {
    optionSingleHeightTime() {
      return {
        // singleHeight: 50,
        // waitTime: 1500,
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 4, // 开始无缝滚动的数据量
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 0, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动)
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动)
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      }
    },
  },
  data() {
    return {
      List: [
        {name:1,value:1},
        {name:2,value:1},
        {name:3,value:1},
        {name:4,value:1},
        {name:5,value:1},
        {name:6,value:1},
        {name:7,value:1},
        {name:8,value:1},
        {name:9,value:1},
        {name:10,value:1},
      ],
    }
  },
  filters: {
  },
  mounted() {
  },
  methods: {
    //无限滚动无法获取复制dom的事件 用此方法
    clickProps(e) {
      let item = JSON.parse(e.target.dataset.obj)
      console.log(item,"点击事件");
      this.showDetail(item)
    },
    showDetail(item) {
      console.log("点击事件");
    },
  },
}
</script>

<style scoped lang="less">
.seamless-warp {
  height: 100%;
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
}
.item {
  background: red;
  margin: 10px;
  width: calc(100 - 20px);
  height: 200px;
}
</style>