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>