List + useLoadMore 实现加载更多

使用 Vant List + VueRequest 的 useLoadMore 实现瀑布流滚动加载

HTML部分：

    <van-list 
       v-model:loading="loadingMore" 
       :finished="noMore" 
       finished-text="没有更多了" 
       @load="loadMore" > 
         <template v-for="(item, index) in rankList" :key="item.user_id">
              ...
         </template>
    </van-list>

List 组件通过 loading 和 finished 两个变量控制加载状态，当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。如结合useLoadMore使用，则无需设置、更新各种状态。

在页面中引入useLoadMore：

<script setup>
  import { useLoadMore } from 'vue-request';
  
  const page_no = ref(-1);
  const PAGE_SIZE = 20;
  
  const loadRankList = () => {
      page_no.value++;
      return userAPI.getInfluenceRank({
        page_size: PAGE_SIZE,
        page_no: page_no.value,
      });
  };
  
  const {
      data, // 返回的数据
      dataList: rankList, // data中list数组
      loadingMore, //是否正在加载更多
      noMore, // 是否有更多数据
      loadMore, // 触发加载更多
    } = useLoadMore(loadRankList, {
      manual: false, // 是否手动触发请求
      listKey: "ranking", //一般dataList直接取的是data中的list,如接口定义其他字段名，则在此设置
      isNoMore: (data) => data && data.ranking && data.ranking.length.PAGE_SIZE,
});
</script>