vant使用van-list组件

使用vant组件库实现列表的下拉刷新与上拉加载

1. 使用的组件：van-pull-refresh（下拉刷新）与van-list（瀑布流滚动加载，用于展示长列表）
2. list里面循环需要展示的数据即可

大概的html代码如下：

 <van-pull-refresh v-model="refreshing" @refresh="'onRefresh">
        <van-list v-model="loading" @load="onLoad" :finished="finished">
            <div v-for="(item,i) in list" :key="'i"></div>
        </van-list>
 </van-pull-refresh>

我们可以把参数写在data里面

data(){
    return{
      list:[],
      loading:false,
      refreshing:false,
      finished；false,
      total:0,
      params:{
        pageNum:0,
        pageSize:10,
        keyword:'',
        id:''
      }
    }
}

设置参数，可以通过方法来更改接口所需要的参数

setParams(newParams){
  this.params = Object.assign(this.params,newParams)
}

获取列表数据

async getList(type) {
      let res = await quesAnsFirPage(this.params);
      if (res.status == “success“) {
        let { rows, total } = res.content;
        this.total = total;
        //当下拉刷新请求数据时，list直接等于新获取的数据
        //当上拉加载时怎拼接数据
        if (type == “refresh“) {
          this.list = rows;
        } else {
          this.list = this.list.concat(rows);
        }
      }
    }, 

上拉刷新

 async onLoad() {
      let params = {
        pageNum: ++this.params.pageNum
      };
      this.setParams(params);
      await this.getList();
      this.loading = false;
      if (this.list.length == this.total) {
        this.finished = true;
      }
    },

下拉加载

async onRefresh() {
      let params = {
        pageNum: 1
      };
      this.setParams(params);
      await this.getList(“refresh“);
      this.finished = false;
      this.refreshing = false;
    },