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。
如果大家有好的方法可以留言奥~~