移动端上拉加载更多的具体实现（vant)

一、使用vant的框架，先引入vant（npm install vant）

npm start

import Vue from 'vue';
import { List } from 'vant';
Vue.use(List)

二、代码部分

 <van-list
      v-model="aloading"
      :finished="finished"
      :immediate-check="false"
      finished-text="没有更多了"
      @load="onLoad()"
      :offset="10"
    >
      <!-- // itemList换成你自己的数据 -->
      <van-cell v-for="item in itemList" :key="item.id">
      </van-cell>
    </van-list>

    <!-- // 没数据时显示 -->
    <div class="no-data" v-if="!this.itemList">
      无更多数据！！！
    </div>

三、数据与方法部分

data(){
	return {
	  aloading: false,
      finished: false,
	}
},
//异步加载数据
methods:{
	async getroadList() {
      try {
        const result = await posttravelQuery({
          tripDate: this.formLabelAlign.tripDate,
          trainNumber: this.formLabelAlign.trainNumber,
          place: this.formLabelAlign.place,
          pageSize: this.pageSize,
          currentPage: this.page
        });
        if (result.code === 200) {
          const response = result.data;
          if (response) {
            this.tableData1 = response.tripEpidemicInfoVOS;
            this.total = response.total;
            this.page = response.currentPage;
            this.tableData =
              this.tableData.concat(this.tableData1);
            this.aloading = false;
          }
          if (this.tableData.length >= this.total) {
            this.finished = true;
          }
        }
        console.log('加载数据失败！');
      } catch (err) {
        console.log(err);
      }
      // 将新数据与老数据进行合并
      this.tableData =
        this.tableData.concat(this.tableData1);
      // 如果列表数据条数>=总条数，不再触发滚动加载
      if (this.tableData.length >= this.total) {
        this.finished = true;
      }
    },
    // 滚动加载时触发，list组件定义的方法
    onLoad() {
      this.page = this.page + 1;
      this.getroadList();
    },
}

过程结束功能实现！