van-list切换检索条件时,防止拉第一页和触发触底检测请求竞争的问题
起因
使用van-list,想要滚动到底部触发加载新数据,但切换检索条件时,要先清空列表,再手动拉取第一页数据,但由于清空了列表会导致自动触发触底加载,请求后数据混乱
解决方案
- 首页加载完毕之前,列表不展示,这样就不会触发触底加载
- 首页加载完,finished状态也更新了,此时列表高度不够时会根据情况触发loadMoreData
- immediate-check是true/false没区别,
- 前提:拉取的limit要够2屏的数据
- 若加载首页长度不能填满一屏,说明已经finished了
- 如果能填满一屏,那么必定会滚动页面,此时会触发loadMoreData
<van-list v-model="loading"
:immediate-check="false"
:finished="finished"
finished-text="没有更多了"
@load="loadMoreData"
class="list-main"
v-if="mgList?.length">
</van-list>
<div class="blank-placehold flex-row"
v-else>
暂无数据!
</div>