H5页面实现上拉加载更多-vue

本文引入了vant移动端UI框架

<van-list v-model="loading" :finished="finished" @load="onLoad" :offset="10" :immediate-check="false">
<div id="list-content"> <ul class="table"> <li v-for="item in serverData" :key="item.sn"> //自己的内容 </li> </ul> </div>

data() {
return {
phonetotal: 1, //总条数
phonepage: 1, //页码
phoneraw: 8, //每页条数
loading: false,
finished: false,
data: [],
serverData: [], //接受服务器的数据,
};
},
methods: {
async getServerData() {
let { code, msg, data } = await HistoryList({
show_num: this.phoneraw,
page: this.phonepage,
});
this.serverData = data.list;
},

async onLoad() {
this.phonepage++;
let { code, msg, data } = await HistoryList({
show_num: this.phoneraw,
page: this.phonepage,
});

this.serverData = [...this.serverData, ...data.list];
this.phonetotal = data.count;
// 加载状态结束
this.loading = false;
// 数据全部加载完成
if (this.serverData.length >= this.phonetotal) {
this.finished = true;
}
},
},

created() {
this.getServerData();
},

mounted() {
let winHeight = document.documentElement.clientHeight; //视口大小
document.getElementById("list-content").style.minHeight =
winHeight - 80 + "px"; //调整上拉加载框高度
},
};