vant组件下拉刷新 + 上拉加载

基础组件 Vant -list 上拉加载数据 使用

1.  	      <!-- 实现下拉刷新 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    	<van-list
    	  v-model="loading"  // 初始值是false, 当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true
    	  :finished="finished" // 初始值为false 若数据已全部加载完毕，则直接将 finished 设置成 true 即可。
    	  finished-text="没有更多了"
    	  @load="onLoad"
    	>
    	//  要用来加载的数据
    	<van-cell v-for="item in articleList" :key="item.aut_id" :title="item.title">
        <!-- 使用 title 插槽来自定义描述 -->
        <!-- column-num 属性是 图片显示列数 -->
        <template #label>
          <van-grid :border="false" :column-num="item.cover.images.length">
            <van-grid-item v-for="image in item.cover.images" :key="image.type">
              <van-image :src="image" />
            </van-grid-item>
          </van-grid>
          <!-- 文字说明 -->
          <div class="meta">
            <span>{{item.aut_name}}</span>
            <span>{{item.comm_count}}</span>
            <span>{{item.pubdate}}</span>
          </div>
        </template>
      </van-cell>
    </van-list>
    </van-pull-refresh>
   
    // 数据代码
        onLoad() {
      // 调用获取点击频道获取频道内容请求
      const channel_id = this.channel.id;
      const timestamp = +new Date();
      getArticles(channel_id, timestamp).then(res => {
        // 你要加载的全新文章数据
        const newArticle = res.data.data.results;
        // 数据全部加载完成 --- 如果你新请求回来的数据的数组内的数据条数为0时，此时加载完成 finished == true， 此时不会触发load事件
        if(newArticle.length === 0) {
            // 是否已加载完成，加载完成后不再触发load事件
            this.finished = true
            return
        }
        // 当前文章的列表数据
        this.articleList = [...this.articleList, ...newArticle]
        // 加载状态结束
        this.loading = false;
   
    });
   
        onRefresh() {
        // 调用获取点击频道获取频道内容请求
        const channel_id = this.channel.id;
        const timestamp = +new Date();
        getArticles(channel_id, timestamp).then(res => {
        // 你要加载的全新文章数据
        const newArticle = res.data.data.results;
        // 当前文章的列表数据
        this.articleList = [ ...newArticle, ...this.articleList];
        // 加载状态结束
        this.isLoading = false;
        // 提示
        this.$toast('刷新成功')
        });
    }