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;
    }
  }
}