1,分页,上拉加载
export default {
data() {
return {
pageNum: 1, // 初始化页码为1
totalPage: null, // 总共有多少页数据
isLoadingMore: false, // 标记正在加载更多数据
listData: [] // 存放所有数据的列表
}
},
onLoad() {
this.getListData(); // 首次进入页面时先加载第一页数据
},
methods: {
getListData() {
uni.request({
url: 'https://api.example.com/list',
method: 'GET',
data: {
pageNum: this.pageNum
},
success: (res) => {
if(this.pageNum === 1){
this.totalPage = res.data.total; // 设置总页数
this.listData = []; // 清空之前的数据
}
const newData = res.data.list || [];
this.listData = [...this.listData, ...newData]; // 将新数据添加到已有数据的尾部
this.isLoadingMore = false; // 结束加载状态
},
fail: () => {
console.log('网络错误');
}
});
},
onReachBottom() {
if(!this.isLoadingMore && this.pageNum < this.totalPage){
this.isLoadingMore = true; // 开始加载状态
setTimeout(()=>{
this.pageNum++; // 每次加载完成后自增页码
this.getListData(); // 再次请求数据
},500); // 模拟异步操作需要等待一段时间才能返回数据
}
}
}
}
2,下拉刷新
在page.json页面中需要下拉刷新的页面设置:
"enablePullDownRefresh": true
然后在页面中与onLoad同级:
onPullDownRefresh() {
console.log('下拉刷新')
this.pageNum = 1
},