vant 组件 上划加载 下拉刷新

上划加载  List 列表自带功能

瀑布流滚动加载，用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项

<van-list
  v-model="loading"                  
  :finished="finished"
  finished-text="没有更多了"       // 没有数据的提示
  @load="onLoad"
  :error.sync="error"
  error-text="请求失败，点击重新加载"     // 加载失败的提示
>
  <van-cell v-for="item in list" :key="item" :title="item" />
</van-list>
export default {
  data() {
    return {
      list: [],            // 请求回来的数据
      loading: false,      // 是否是加载状态    加载状态不触发 onload事件
      finished: false,     // 是否是还有数据  没有数据不触发onload事件  显示没有数据提示
      error: false,        // 是否加载失败 失败弹出提示框 点击提示 触发onload事件重新加载
    };
  },
  methods: {
    // 方式请求的方法
   async onLoad() {  
      try{
         const res = await 封装的发送请求的方法(请求参数)
         console.log('返回的数据',res)  // 得到返回的数据 (假设这组数据可以直接使用)

          // 向数组中追加数据  因为要上划加载 不能直接赋值 要在原数组后添加数据
          this.list.push(...res)      
     
       } catch (err){
          console.log(err)    // 输出错误
          this.error = true;  // 加载失败 错误提醒
       }
          this.loading = false  // 停止加载数据
            
         // 判断得到的数据是否还有  或其他不能再得到数据的条件
          if(res.length === 0 || 其他条件){\
              // 如果的得不到数据   不在触发onload事件
             this.finished = true    
        }

    },
  },
};

下拉刷新      PullRefresh 下拉刷新

<van-pull-refresh
  v-model="refreshing"
  success-text="刷新成功"     // 刷新成功的提示
  @refresh="onRefresh"      // 下拉触发的事件
>

  <p>刷新次数: {{ count }}</p>
 // 更新的内容   可以与list 列表一起使用
</van-pull-refresh>
 
 


// 接上面的代码


 data() {
    return {
      count: 0,         // 记录刷新的次数
      refreshing: false   // 是否是加载状态
    };
  },
  methods: {
   async  onRefresh() {
     try{
         const res = await 封装的发送请求的方法(请求参数)
         console.log('返回的数据',res)  // 得到返回的数据 (假设这组数据可以直接使用)

          // 向数组头部追加数据    新数据要优先显示
          this.list.unshift(...res)      
     
       } catch (err){
          console.log(err)    // 输出错误
          this.error = true;  // 加载失败 错误提醒
       }
          this.refreshing = false // 停止加载数据
            
         // 判断得到的数据是否还有  或其他不能再得到数据的条件
          if(res.length === 0 || 其他条件){\
              // 如果的得不到数据   不在触发onload事件
             this.finished = true    
        }

    },
    },
  },