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

蔚落 2023-07-04 11:06 10阅读 0赞

一、使用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"
        >
          
          <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();
        },
    }

过程结束功能实现！