vue使用vant组件，van-pull-refresh和van-list分页加载及下拉刷新

<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
      v-model="loading"
      :finished="finished"
      :finished-text="list.length > 0 ? '已经到底了' : ''"
      @load="onLoad"
    >
          <div v-for='item in list'></div>
     </van-list>
</van-pull-refresh>

data () {
    return {
      refreshing: false,
      loading: false,
      finished: false,
      list: [],
      page:1
    }
}  ,
 methods: {
        // 加载
    onLoad () {
      setTimeout(() => {
        if (this.refreshing) {
          this.page = 1
          this.list = []
          this.refreshing = false
        }
        this.getData()
      }, 500)
    },
    // 下拉刷新
    onRefresh () {
      // 清空列表数据
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
        
       //如果想下拉时立马清空数据 加载
      this.page = 1
      this.list = []

      this.onLoad()
    },
          // 获取列表
    getData () {
//后台发送请求
      this.$http.list({})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            let data = res.data.data
            //  分页操作
            if (data.length > 0) {
              data.forEach(curr => {
                this.list.push(curr)
              })
              this.loading = false
              this.page++
            } else {//停止调用接口
              this.finished = true
            }
          } else {
            this.finished = true
            this.loading = false
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          this.finished = true
          this.loading = false
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
  }

仅供自己学习参考，不喜勿喷