vue项目中使用vue-seamless-scroll遇到的坑

官网地址
插件在线演示文档
参考版本号
“vue-seamless-scroll”: “^1.1.23”

遇到的问题

1、静态数据滚动没问题，数据变成请求后端接口后在渲染时，会出现无法自动滚动的情况，鼠标移动上去后在离开才会滚动，此种情况是因为，组件在有数据前已经完成了渲染，官网上也没有查到重新渲染组件的方法(this.$refs.scroll.reset()并不能达到效果)，此时可以借助于v-if来实现，v-if可以实现组件的挂载和销毁的效果，如下：

<vue-seamless-scroll
      ref="vueSeamlessScroll"
      v-if="scrollDatas.length > 0"
      :data="scrollDatas"
      :class-option="classOption"
      class="vue-seamless-scroll">
      ……
    </vue-seamless-scroll>

2、给组件子元素绑定事件，但是数据的点击事件，只有第一遍循环的时候生效，后面循环出来的数据都不生效
解决办法：给外层div添加事件委托

html部分
  <div class="scroll-container" ref="scroll" @click="viewRecord($event)">
    <vue-seamless-scroll
      ref="vueSeamlessScroll"
      v-if="scrollDatas.length > 0"
      :data="scrollDatas"
      :class-option="classOption"
      class="vue-seamless-scroll">
      <ul ref="scrollBlock" class="scroll-block">
        <li v-for="item in newScrollDatas" :key="item.id"
            :data="JSON.stringify(item)"
            class="listItem"
        >
          <span class="icon" v-if="item.aiServiceName"></span>
          <span>{{ item.aiServiceName }}</span>
        </li>
      </ul>
    </vue-seamless-scroll>
  </div>
  // js部分
  viewRecord(e) {
        const path = e.path || (e.composedPath && e.composedPath());
        let target = path.filter((r) => /listItem/.test(r.className));
        if (target.length) {
          target = target[0];
        } else return;
        const data = JSON.parse(target.getAttribute("data")); // 单项数据详情，点击那行数据的所有数据
        ……
      }

3、有时候，项目中可能会需要不管子级有多少项，都可以滚动的情况，此时就可能出现，子级个数过少，但是父级宽度大的情况，此种情况下设置limitMoveNum: 1可以实现滚动，但是滚动效果并不友好，如下

此种情况本人没找到官方解决办法，自己想了个办法就是动态判断子级宽度是否超过父级，如未超过，就动态添加一个子级来占位，子级宽度和父级宽度相等，关键代码如下

// html部分
  <div class="scroll-container" ref="scroll" @click="viewRecord($event)">
    <vue-seamless-scroll
      ref="vueSeamlessScroll"
      v-if="scrollDatas.length > 0"
      :data="scrollDatas"
      :class-option="classOption"
      class="vue-seamless-scroll">
      <ul ref="scrollBlock" class="scroll-block">
        <li v-for="item in newScrollDatas" :key="item.id"
            :data="JSON.stringify(item)"
            class="listItem"
            :style="{ width: item.widthNum?item.widthNum+'px': 'auto' }"
            :class="item.widthNum? 'covering': ''"
        >
          <span class="icon" v-if="item.aiServiceName"></span>
          <span>{{ item.aiServiceName }}</span>
        </li>
      </ul>
    </vue-seamless-scroll>
  </div>
// js部分
 mounted() {
      this.updateWidth();
      window.addEventListener("resize",this.resizeWidth);// 监听窗口宽度发生变化时的情况
    },
methods: {
	updateWidth() {
        this.newScrollDatas = JSON.parse(JSON.stringify(this.scrollDatas));
        if(this.newScrollDatas.length > 0) {
          this.$nextTick(() => {
            let width = this.$refs.scroll.offsetWidth;
            let wid = this.$refs.scrollBlock.offsetWidth;
            if(wid < width) {
              this.newScrollDatas.unshift({
                id: 'custom',
                name: '',
                widthNum: width
              })
            }
            this.$refs.vueSeamlessScroll.reset();
          })
        }
      },
      resizeWidth() {
        if($('.covering').length > 0) {
          $('.covering').css('width', this.$refs.scroll.offsetWidth + 'px')
        }
        $('.vue-seamless-scroll>div').width($('.scroll-block').width() * 2 + 1 + 'px');
      }
}