vue 下拉刷新数据

借助vant完后下拉刷新出来新数据

这是vant官网的list 列表
https://youzan.github.io/vant/#/zh-CN/list

直接上代码

<template>
  <div>
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <ul>
            <li v-for="(e,i) in list" :key="i">
                <img v-lazy="e.img" alt="">
                <p>{{e.t1}}</p>
                <p>{{e.t2}} {{e.t3}}</p>
                <p>{{e.t4}}</p>
            </li>
        </ul>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import axios from "axios"
export default {
   data() {
    return {
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      page:0,
      number:10,
      all:""
    };
  },
  mounted()
  {
    axios.get("/static/data.json").then((res)=>{
      this.all=res.data.list.length
      this.list=res.data.list.slice(this.page,this.number)
    })
  },
  methods: {
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          //这是下拉刷新新数据
          this.page=this.page+10;
          this.number=this.number+10;
          axios.get("/static/data.json").then((res)=>{
            var data = res.data.list.slice(this.page,this.number)
            data.forEach((e)=>{
            this.list.unshift(e)
          })
        })
          this.refreshing = false;
        }


        //这里面可以写滚动到底部加载更多数据

        // for (let i = 0; i < 10; i++) {
        //   this.list.push(this.list.length + 1);
        // }
        
      

        this.loading = false;

        if (this.list.length >= this.all) {
          this.finished = true;
        }
      }, 3000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    }
  }
}
</script>

<style lang="scss" scoped>
 ul{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        li{
            width: 50%;
        }
    }
</style>