【vueSeamless】vue-seamless-scroll的各种问题及解决方案

使用vueSeamless组件

<vueSeamless
            :data="leftBtnList"
            id="id"
            class="seamless-warp"
            :class-option="optionSetting"
            ref="seamlessScroll"
          >
            <div
              v-for="(item,index) in leftBtnList"
              :key="index"
              :data="JSON.stringify(item)"
            >
              <div :class="item.id==queryParam.unitId?'left-btn-item left-item-ac':'left-btn-item left-item-unac'">
                <div class="left-btn-title">{{item.departName}}</div>
                <div
                  class="left-btn-num"
                  :data="JSON.stringify(item)"
                >
                  <span>{{item.total}}</span><span>人</span>
                </div>
              </div>
            </div>
          </vueSeamless>

配置项

  computed: {
    optionSetting() {
      let obj = {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 6, // 开始无缝滚动的数据量 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)
      }
      return obj
    },
  },

1，复制出来的元素无法触发点击事件

:data="JSON.stringify(item)"

 let item = e.target.parentElement.parentNode.getAttribute('data') ? JSON.parse(e.target.parentElement.parentNode.getAttribute('data')) : JSON.parse(e.target.parentElement.getAttribute('data'));
      this.$set(this.queryParam, 'unitId', item.id)

这个设置相当于将参数变成元素的属性，直接去找点击元素的属性即可

2，状态没有立刻回显

this.$refs.seamlessScroll.reset()

重置一下状态即可