使用vant实现下拉刷新上拉加载

整理了一下vue的下拉刷新上拉加载，我这里使用的是vant，
亲测可用，有需要的可以了解一下！

template部分：

<!-- 刷新加载 -->
<template>
<div class=''>
<div class="list-content" id="list-content">
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">  //刷新函数
 <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.key"
    :title="item.name"
  />
</van-list>
</van-pull-refresh>
</div>
</div>
</template>

函数如下：

<script>
import {itemsAddress} from '../api/https'
import { List, Toast, Cell, PullRefresh } from 'vant'

export default {
  components: {
    [List.name]: List,
    [Toast.name]: Toast,
    [Cell.name]: Cell,
    [PullRefresh.name]: PullRefresh
  },
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      pageNumber: 0,
      error: false,
      isLoading: false // 是否处于下拉刷新状态
    }
  },
  mounted () {
 
  },
  methods: {
    async onLoad () {
      this.pageNumber += 1
      let res = await itemsAddress()  //这里是我封装好的接口，替换成你的地址即可
      if (res.code === 0) {  
        setTimeout(() => {
          let rows = res.data
          // 异步更新数据
          for (let i of rows) {
            this.list.push(i)
          }
          // 加载状态结束
          this.loading = false
          // 数据全部加载完成
          if (this.list.length >= 40) {
            this.finished = true
          }
        }, 500)
      } else {
        this.error = true
      }
    },
    onRefresh () { // 下拉刷新
      setTimeout(() => {
        this.finished = false
        this.isLoading = false
        this.list = []
        this.onLoad()
      }, 500)
    }
  }
}
</script>