vue-seamless-scroll 点击click失效

安装vue-seamless-scroll

npm install vue-seamless-scroll --save

引入
1.main.js中全局引入

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

2.局部引入

<script>
  import vueSeamless from 'vue-seamless-scroll'
   export default {
      components: {
        vueSeamless
      }
   }
</script>

在template中使用 vue-seamless-scroll 标签
在代码中直接加上点击事件触发弹出框的话，在第二轮循环的时候弹不出来

<template>
  <div
    class="maintable"
    v-if="datalist && datalist.length > 0"
  >
    <vue-seamless-scroll :data="datalist" :class-option="listOption">
      <div class="onebox" v-for="(item, index) in datalist" :key="index">
        <div class="name" :title="item.xm">{{ item.xm }}</div>
        <div class="phone">{{ item.enSjh }}</div>
        <div class="cardnumber">
          {{ item.enSfzh }}
          <!-- {{ item.cardnumber | jmsjh }} -->
        </div>
        <div class="record"  @click="recordInfo(item)">
          追踪记录查看
        </div>
      </div>
    </vue-seamless-scroll>
  </div>
</template>

此时在轮播的父元素绑定一个点击事件@click=“clickup($event)”

在添加了点击事件之后，点击那个列那里的任一地方都会触发click事件，那么要实现只点击对应地方才弹框的需求，可以加个判断条件

<template>
  <div
    class="maintable"
    @click="clickup($event)"
    v-if="datalist && datalist.length > 0"
  >
    <vue-seamless-scroll :data="datalist" :class-option="listOption">
      <div class="onebox" v-for="(item, index) in datalist" :key="index">
        <div class="name" :title="item.xm">{{ item.xm }}</div>
        <div class="phone">{{ item.enSjh }}</div>
        <div class="cardnumber">
          {{ item.enSfzh }}
          <!-- {{ item.cardnumber | jmsjh }} -->
        </div>
        <div class="record" :data-obj="JSON.stringify(item)">
          <!-- :data-obj="JSON.stringify(item)" 传递参数 -->
          追踪记录查看
        </div>
      </div>
    </vue-seamless-scroll>
  </div>
</template>

	clickup(e) {
      // 使仅点击按钮触发点击事件
      if (e.target.classList.contains("record")) {  // record要点击的class名
        let row = JSON.parse(e.target.dataset.obj); // 传递参数
        this.$parent.$parent.recordLIst(row);
      }
    },

完整代码

<template>
  <div class="item-main">
    <!-- 表格头部 -->
    <div class="header">
      <div class="name">姓名</div>
      <div class="name">电话</div>
      <div class="name">身份证</div>
      <div class="name">追踪记录</div>
    </div>
    <!-- 表格内容 -->
    <div
      class="maintable"
      @click="clickup($event)"
      v-if="datalist && datalist.length > 0"
    >
      <vue-seamless-scroll :data="datalist" :class-option="listOption">
      	<div class="onebox" v-for="(item, index) in datalist" :key="index">
          <div class="name" :title="item.name">{{ item.name }}</div>
          <div class="phone">{{ item.phone | jmSfzh }}</div>
          <div class="cardnumber">{{ item.cardnumber | jmsjh }}</div>
          <div class="record" :data-obj="JSON.stringify(item)">
          <!-- :data-obj="JSON.stringify(item)" 传递参数 -->
            追踪记录查看
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
    <div class="empty" v-else-if="datalist.length == 0 && isInit">暂无数据</div>
    <!-- <trackRecord ref="trackRecord" /> -->
  </div>
</template>
<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      isInit: false,
      datalist: [
        {
          name: "李四",
          phone: "13312345678",
          cardnumber: "620123425266776343",
          record: "追踪记录查看",
        },
        {
          name: "张三",
          phone: "13312345678",
          cardnumber: "620123425266776343",
          record: "追踪记录查看",
        },
      ],
    };
  },
  filters: {
    jmSfzh(name) {
      if (name != null) {
        return name.substr(0, 3) + "****" + name.substr(7);
      }
    },
    jmsjh(name) {
      if (name != null) {
        return name.substr(0, 10) + "****" + name.substr(14);
      }
    },
  },
  methods: {
    clickup(e) {
      // 使仅点击按钮触发点击事件
      if (e.target.classList.contains("record")) {
        let row = JSON.parse(e.target.dataset.obj);
        this.$parent.$parent.recordLIst(row);
      }
    },
  },
  mounted() {
    this.getList();
  },
  computed: {
    listOption() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 4, // 开始无缝滚动的数据量 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)
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.empty {
  font-size: 0.4rem;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  font-weight: 400;
  color: #ffc26c;
  // height: 100%;
  text-align: center;
  padding-top: 2rem;
}
.item-main {
  width: 100%;
  height: 100%;
  position: relative;
  padding-top: 0.63rem;
  .header {
    width: 100%;
    height: 0.71rem;
    display: flex;
    justify-content: space-evenly;
    padding-left: 0.75rem;
    padding-right: 0.83rem;
    .name {
      text-align: center;
      width: 3.6rem;
      font-size: 0.4rem;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffa525;
      line-height: 0.29rem;
    }
  }
  .maintable {
    overflow: hidden;
    width: 100%;
    height: 5.27rem;
    padding-left: 0.75rem;
    padding-right: 0.83rem;
    padding-bottom: 0.7rem;
    .onebox {
      width: 100%;
      height: 0.85rem;
      // background: url("~@/assets/bigdata/photo2.png") center center no-repeat;
      // background-size: 100% 100%;
      background-color: rgba($color: #ffa525, $alpha: 0.3);
      margin-bottom: 0.2rem;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      cursor: pointer;
      .name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
        width: 3.6rem;
        font-size: 0.4rem;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffc26c;
      }
      .phone {
        text-align: center;
        width: 3.6rem;
        font-size: 0.4rem;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffc26c;
      }
      .cardnumber {
        text-align: center;
        width: 3.6rem;
        font-size: 0.4rem;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffc26c;
      }
      .record {
        text-align: center;
        width: 3.6rem;
        font-size: 0.4rem;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffc26c;
      }
    }
  }
}
</style>