最近在做h5移动页面开发，并且需要用移动端android和ios将h5嵌进去。在开发过程中，使用了vant这个框架；
vant文档：https://youzan.github.io/vant/#/zh-CN/intro
该项目中根据后台API拿到的数据包含分页信息，
首先需要用到vant框架中的van-pull-refresh和van-list
<!-- 列表组件&&分页 --><van-pull-refreshv-model="isDownLoading"@refresh="onDownRefresh"v-show="dtWinNumberInfos.length != 0"><van-listv-model="isUpLoading":finished="upFinished":immediate-check="false":offset="10"finished-text="加载完成"@load="onLoadList"><div v-if="dtWinNumberInfos.length > 0" class="allcontent"><file-list :listData="dtWinNumberInfos" @getList="reloadPageList" /></div></van-list></van-pull-refresh>
在data中，需要声明的变量是：
data() {return {pageSize: 30, // 每页条数pageIndex: 1, // 页码dtWinNumberInfos: [], // 请求数据isDownLoading: false, // 下拉刷新isUpLoading: false, // 上拉加载upFinished: false, // 上拉加载完毕offset: 100 // 滚动条与底部距离小于 offset 时触发load事件};},
//列表getArchiveList() {let params = {isTextBook: this.$route.name == "bookSync" ? "1" : "0",courseId: JSON.parse(localStorage.getItem("selSubject")).id,currentPage: this.pageIndex,pageSize: this.pageSize};api.getArchiveList(newParams).then(res => {if (res.data.code != 0) {utils.mbToast(res.data.message);//弹框return;}let partList = res.data.data.items || [];//分页处理let currentPage = res.data.data.currentPage;let totalPage = res.data.data.totalPage;if (partList == null || partList.length == 0) {//加载结束this.upFinished = true;return;}if (partList.length < this.pageSize) {//最后一个不足设定的页面条数this.upFinished = true;}//处理数据if (this.pageIndex === 1) {this.dtWinNumberInfos = partList;} else {this.dtWinNumberInfos = this.dtWinNumberInfos.push(...partList);}}).catch(error => {utils.mbToast("获取列表异常");}).finally(() => {this.isDownLoading = false;this.isUpLoading = false;});},onDownRefresh() {this.pageIndex = 1;this.dtWinNumberInfos = []this.upFinished = false; // 不写这句会导致上拉到底过后在下拉刷新将不能触发下拉加载事件this.getArchiveList(); // 加载数据},// 上拉加载请求方法onLoadList() {this.pageIndex++;this.getArchiveList(); // 加载数据},
如果觉得《h5结合vant框架 实现列表上拉加载下拉刷新》对你有帮助，请点赞、收藏，并留下你的观点哦！
