关于vue滚动插件vue-j-scroll数据有多变少不可以滚动且抖动问题解决

最新推荐文章于 2024-08-23 17:32:08 发布

世林_不调皮了

最新推荐文章于 2024-08-23 17:32:08 发布

阅读量2k

点赞数 2

分类专栏：前端文章标签： vue.js Powered by 金山文档

本文链接：https://blog.csdn.net/m0_55891422/article/details/129459711

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

当从码头的9个数据切换到企业3个数据时，发现数据无法正常滚动并出现抖动。解决方案是在vue-j-scroll组件上添加ref属性，如scRef，并在数据更换后调用this.$refs.scRef.stop()来停止滚动，从而消除异常。此方法适用于处理Vue应用中列表滚动更新的场景。

摘要由CSDN通过智能技术生成

问题：从码头的9个数据可以滚动到企业的三个数据不能滚动，数据一直在下面且文字抖动。

2，解决方式：在vue-j-scroll标签上添加ref属性（这里用scRef代替），在数据更换结束之后调用 this.$refs.scRef.stop()，就可以轻松解决了

代码

//html结构 
<vue-j-scroll
        class="seamless-warp"
                :data="caseDataList"
                :steep="0.3"
                scrollDirection="top"
                :isRoller="true"
                :rollerScrollDistance="50"
                v-show="caseDataList.length !== 0"
                ref="caseDataListRef"
              >
                <div class="ub-table_body">
                  <ul v-for="(item, i) in caseDataList" :key="i">
                    <li>{{ item.index }}</li>
                    <li
                      class="ub-color_m"
                      @click="handleCaseList(item.type, item.uuid)"
                    >
                      {{ item.name }}
                    </li>
                    <li>{{ item.count }}</li>
                    <li>{{ item.wait }}</li>
                    <li>{{ item.rate }}</li>
                    <li>{{ item.time }}</li>
                  </ul>
                </div>
              </vue-j-scroll>

//js切换数据函数计数据
    async getCaseStatistics() {
      const res = await reqCaseStatistics(this.caseobj);
      this.caseDataList = res.items;
      this.$refs.caseDataListRef.stop();
    },