一、上拉加载(页面 | uni-app官网)
onReachBottom
可在pages.json里定义具体页面底部的触发距离onReachBottomDistance,
比如设为50,那么滚动页面到距离底部50px时,就会触发onReachBottom事件。
如使用scroll-view导致页面没有滚动,则触底事件不会被触发。scroll-view滚动到底部的事件请参考scroll-view的文档。
使用实例:
export default {
data() {
return {
list: [],//数据列表
params: {// 请求参数
pageNum: 1,//页码
pageSize: 10,//每页显示
total: 0,//总条数
},
};
},
onLoad() {
this.getList();
},
methods: {
getList() {// 获取列表
//调用接口
listTrends(this.params).then((result) => {
this.params.total = result.total;
this.list = [...this.list, ...result.rows];//现有数据=旧数据+请求的新数据
uni.stopPullDownRefresh()// 请求成功关闭下拉加载
});
},
onReachBottom() {// 上拉加载
// 当列表数量不大于或等于总数量,则再次调用接口请求数据
if (this.list.length >= this.params.total) return;
this.params.pageNum++;
this.getList();
},
},
};
二、下拉刷新
onPullDownRefresh(pages.json 页面路由 | uni-app官网)
首先需要在pages.json中找到需要下拉刷新的页面,配置enablePullDownRefresh为true
示例
{
"path": "pages/mine/index",
"style": {
"navigationBarTitleText": "我的",
"enablePullDownRefresh": true
}
}
页面示例
export default {
data() {
return {
list: [],//数据列表
params: {// 请求参数
pageNum: 1,//页码
pageSize: 10,//每页显示
total: 0,//总条数
},
};
},
onLoad() {
this.getList();
},
//下拉刷新方法
onPullDownRefresh () {
this.params.pageNum = 1
this.list = []
this.getList() //获取数据
},
methods: {
getList() {// 获取列表
listTrends(this.params).then((result) => {
this.params.total = result.total;
this.list = [...this.list, ...result.rows];//现有数据=旧数据+请求的新数据
});
},
onReachBottom() {// 上拉加载
// 当列表数量不大于或等于总数量,则再次调用接口请求数据
if (this.list.length >= this.params.total) return;
this.params.pageNum++;
this.getList();
},
},
};