vue+vant实现上拉加载下拉刷新（访问后台逻辑）

这里是简单的描述一下如何使用vant局部刷新访问后台

这里上拉加载，下拉刷新，写了两遍的访问接口。如果想写一边可通过参数在getList中控制判断。

<template>
  <div>
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" loosing-text="释放刷新" pulling-text="下拉刷新" success-text="刷新成功">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多啦"
            offset="10"
            :immediate-check="false"
            @load="onLoad">
                <div class="list" v-for="(item,index) in list" :key="index">
                    {{item.name}}
                </div>
          </van-list>
        </van-pull-refresh>
  </div>
</template>

<script>
import { List,PullRefresh} from 'vant'
export default {
  components:{
      [List.name]:List,
      [PullRefresh.name]:PullRefresh,
  },
  data() {
    return {
        list: [],
        loading: false,
        finished: false,
        refreshing: false,
        param:{
            "page": 1,
            "rows": 10,
        }
    };
  },
  mounted() {
      this.getList()
  },
  methods: {
    async getList(){
        this.param.page = 1
        this.$http.getList(this.param).then( res => {
            this.list = res.datas    //datas是列表集合
            // totals是后台返回的列表总条数
            if(res.totals === this.list.length){
                this.finished = true
            }else {
                this.finished = false
            }
            this.param.page = 2
            this.refreshing = false
            this.loading = false
        })
    },
    onLoad() {
        this.$http.getList(this.param).then( res => {
            let datas = res.datas
            this.list = this.list.concat(datas)
            if (this.list.length < res.totals) {
                this.param.page++
                this.loading = false
            }else{
                this.finished = true
                this.loading = true
            }
        })
    },
    onRefresh() {
        this.getList()
    }
  }
}
</script>