vue-seamless-scroll使用中遇到关于click点击时间时而不生效的问题

 1.检查

通过检查发现，这是把要滚动的部分复制一份，滚动这两部分相同的内容，进而实现无缝连续滚动

 

2.遇到的问题

当第一部分中的数据未滚动完时,第二部分的click事件不起作用，无法实现功能

3.解决办法

原因：第二部分无法操作和js的运行机制有关，需要重新绑定事件

解决：给外层div加点击事件，通过event.target获取到点击的dom元素

 

 

 

 

 

 

 

4.例子 

<template>
<div @click="liClick($event)">>

  <vue-seamless-scroll
    :data="listData"
    :class-option="classOption"
    class="warp"
  >
    <ul class="item">
      <li v-for="(item, index) in listData" :key="index" >
        <span class="title" v-text="item.title" :title="item.title" :data-title ="item.title"></span>
        <span class="date" v-text="item.date" :date='item.date'></span>
      </li>
    </ul>
  </vue-seamless-scroll>
</div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";

export default {
  name: "Example01Basic",
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      listData: [
        {
          title: "无缝滚动第一行无缝滚动第一行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第二行无缝滚动第二行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第三行无缝滚动第三行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第四行无缝滚动第四行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第五行无缝滚动第五行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第六行无缝滚动第六行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第七行无缝滚动第七行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第八行无缝滚动第八行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第九行无缝滚动第九行",
          date: "2017-12-16",
        },
      ],
      classOption: {
        step: 1, //滚动速度
        direction: 0 , //  滚动方向   2向左    3向右   默认向上 1   0 向下
        hoverStop: true,    //鼠标移入停止  默认为true
         singleHeight: 30, //单步停顿
           waitTime:1000,
      },
    };
  },
  methods:{
      liClick(e,index){
          console.log(e);
          console.log(e.target);
          console.log(e.target.dataset.title);
      }
  }
};
</script>
<style lang="less" scoped>
.warp {
  height: 270px;
  width: 360px;
  margin: 0 auto;
  overflow: hidden;
  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    li,
    a {
      background-color: lightblue;
      margin: 5px 0;
      display: block;
      height: 30px;
      line-height: 30px;
      display: flex;
      justify-content: space-between;
      font-size: 15px;
    }
  }
}