vue3 使用vant4中的List分页加载时,会回滚到页面顶部

问题

项目中使用vue3+vant4,列表页使用了 List 来做列表加载,代码如下:

<van-list
  v-model:loading="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
  <div v-if="list && list.length" class="listCon">
    <div class="item" v-for="(item, index) in list" :key="item">
      {{ item.name }}
    </div>
  </div>
  <div v-else>
    暂无数据
  </div>
</van-list>

以上组件使用到的方法不再罗列,只阐述使用了List组件,产生的问题是:
接口使用分页,上拉加载第二页及后续页面时,h5页面会回滚到顶部

解决

查代码发现,在封装的request组件中,发送请求时展示Toast,请求结束去除Toast,就是这个Toast导致的页面回滚到顶部。

解决方法 暂时时发送请求时判断path是否为列表,是的话不展示Toast。
如果大家有好的方法可以留言奥~~

posted @ 2024-04-25 10:15  ZerlinM  阅读(118)  评论(0编辑  收藏  举报