vue使用 vant-ui 中的上拉加载的实现

vue使用 vant-ui 中的上拉加载的实现

<div>
	<input/>
	<table><table/>
<div>
...
<van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
<van-pull-refresh v-model="isLoading" @refresh="onRefresh(-1)">
。。。  //列表内容，需要加载和刷新的部分 
<table>...</table>
</van-pull-refresh>
  <van-cell
    v-for="item in list"
    :key="item"
    :title="item"
  />
</van-list>
export default {
  data() {
    return {
      flag_scroll: false,
      loading: false,
      finished: false,
      isLoading: false,
      page:1,
    };
  },

  methods: {
   //上拉加载
//异步请求数据 ，我们的项目时封装好的方法，此处只是调用
    onLoad(code){
      this.pageNum++
      let param ={
      pageSize:10,
      pageNum: this.pageNum
      token:xxx,
      ...
      }
      //发请求
    Api.queryWeatherList(param).then(res => {
      if (res.code === '0') {
        if (this.weather.length === 0) {
          this.weatherList = res.resultData.weaList
        } else {
          //后端返回带分页的每条10条数据，应该把所有数据连起来
          this.weatherList = [...this.weatherList,...this.resultData.weaList]
        }

        //加载结束
        this.loading =false
        //数据全部加载完成
        if(res.resultData.weatherList.length < 10){ //pageSize:10
        //if(res.resultData.weatherList.length === 0){ 判断 等于0会多请求一次
          this.finished = true
        }
      }

    })
     
    ...
       
    },
}

需要注意的点：

1.请求成功后this.loading = false
2.注意dom结构，仅把需要更新的数据放在van-list中
3.页码自增this.page++
4.要把页面数据拼接起来