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

2023-12-27 13:20:02

官网地址
插件在线演示文档
参考版本号
“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');
      }
}

文章来源:https://blog.csdn.net/qq_36877078/article/details/135215340
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。