阅读视图

发现新文章,点击刷新页面。

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>
❌