vue-seamless-scroll遇到一些问题

 vue-seamless-scroll点击事件不触发解决办法

使用事件委托来解决,代码如下:

<template>

  <div class="container">

    <div class="title">

      <div class="title-left">越限预警</div>

    </div>

    <div class="box seamless-warp-item" @click="itemClick">

      <vue-seamless-scroll :data="listData" :class-option="defaultOption">

        <!-- <ul class="ul-scoll"> -->

        <div v-for="(item, index) in listData" :key="index" class="ul-scoll">

          <a-row>

            <a-col :span="17">

              <div class="scoll-left">

                <span>{{ index + 1 }}</span>

                <span class="span">{{ item.region }}</span>

                <span class="span"

                  >{{ item.name }}于{{ item.occurDate }}

                  {{ item.occurTime }}发生越限,请知悉</span

                >

              </div>

            </a-col>

            <a-col :span="7" class="get-item-list" :data-index="index">

              <a-button type="link" :id="'btn' + index" :data-index="index"

                >查看详情</a-button

              >

            </a-col>

          </a-row>

        </div>

      </vue-seamless-scroll>

    </div>

  </div>

</template>

<script>

import vueSeamlessScroll from 'vue-seamless-scroll'

export default {

  components: { vueSeamlessScroll },

  props: {

    dataObj: {

      type: Object

    }

  },

  data () {

    //这里存放数据

    return {

      listData: [],

    }

  },

  computed: {

    defaultOption () {

      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)

      }

    }

  },

  //监控data中的数据变化

  watch: {

    dataObj: {

      handler (newVal) {

        // user里的对象

        this.listData = newVal.data

      },

      deep: true,

      immediate: true

    }

  },

  //方法集合

  methods: {

    warningBtn (item) {

      this.$emit('warningBtn', true, item)

      // sessionStorage.setItem(" warningQuery", { region: item.code, stationId: item.id, time: item.occurDate })

    },

    itemClick (e) {

      const item = e.target.closest(".get-item-list"); // 定位元素

      if (item) { // 是否是滚动组件的某一行/列

        const { index } = item.dataset;

        this.$emit('warningBtn', true, this.listData[index])

        // 后续操作

      }

    }

  },

}

 因为我业务需求得要点击事件触发后会有一个ant design vue的modal对话框弹出 ,但是在使用的过程中只要关闭对话框的话滚动的列表会出现dom刷新,偶尔会导致dom消失  解决办法是在modeal上加v-if

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值