微信小程序下拉加载数据更多,使用到分页查询的原理,当用户下拉加载的时候触发事件,获取待处理数据 ,将待处理数据添加到数据组中。以下仅是自己实现的一种方式,可供参考
示例如下:
<template>
<view>
<view v-for="(item,index) in listData" :key="index">
<view>{{item}}</view>
</view>
<view v-if="showMore">
<uni-load-more :status="status" :content-text="contentText" color="#969799" @clickLoadMore="getMore()"/>
</view>
<view class="noData" v-if="!showMore ">暂无数据</view>
</view>
</template>
<script>
export default {
data() {
return {
page: 1,
pagesize: 10,
content: "暂无数据",
status: 'more',
statusTypes: [
{
value: 'more',
text: '加载前'
}, {
value: 'loading',
text: '加载中'
}, {
value: 'noMore',
text: '没有更多'
}
],
contentText: {
contentdown: '查看更多',
contentrefresh: '加载中',
contentnomore: '没有更多'
},
showMore: true,
listData: [], // 存放待处理数据
upLoadData: [], //存放数据组
}
},
onLoad(option) {
//获取初始化数据
this.search();
},
methods: {
getMore() {
this.upLoadData = [];
//当前数据大于等于总数据条数停止继续加载
if (this.upLoadData.length >= this.total) {
this.status = 'noMore';
this.showMore = true;
} else {
this.status = 'loading'
uni.showNavigationBarLoading();
this.page++; //当前页码加1
this.request({
url: '/getList',
method: 'POST',
data: {}
}).then(res => {
uni.hideLoading();
if (res.code === 200) {
this.showMore = true;
//将接口获取的存在待处理数据列表中
this.upLoadData = res.data;
//计算出总页码数 向上取整
let totalPage = Math.ceil(this.total / this.pagesize)
//当前页码大于总页码数 停止继续加载
if (this.page > totalPage) {
this.status = 'noMore'
uni.hideNavigationBarLoading()
} else {
//反之在一秒后将待处理数据添加到数据组中
setTimeout(res => {
this.listData = this.listData.concat(this.upLoadData);
this.status = 'more';
uni.hideNavigationBarLoading();
}, 1000);
}
} else {
this.showMore = false;
}
}).catch(error => {
console.log("请求失败:", error)
})
}
},
search() {
this.request({
url: '/getList', //接口地址
method: 'POST',
data: {} // 请求参数
}).then(res => {
if (res.code === 200) {
this.listData = res.data // 获取初始化数据
this.total = res.total // 获取总数据条数
}
})
},
}
}
</script>