uniapp 触底加载更多数据的方法
一、配置pages.json
- 在uni-app中，页面滑动到底部可以监听到onReachBottom() 方法，如下配置：
// pages.json 文件中{ "path": "pages/index",
"style": {
"navigationBarTitleText": "当前页面的title",
"navigationStyle":"custom", //当前页面不需要导航`
"enablePullDownRefresh":true, //配置后，可以下拉刷新，上拉加载`
"onReachBottomDistance":100
}
},
// 滑动到距离底部100px的时候触发（上拉加载）
onReachBottom() {
console.log('滑动到距离底部100px的时候触发,可以放 。。业务逻辑');
}, //下拉执行的时候触发 （下拉刷新）
onPullDownRefresh () { //放要执行的动作....
wx.stopPullDownRefresh()
//停止下拉刷新效果的api，如果发现进入刷新状态无法停止，可以用这个
},
二、获取数据
- 思路：在页面加载的时候先请求十条数据，然后用户滑动到页面底部，继续加载11-20条数据，以此类推。
data() {//变量配置处
return{
hots: [], //活动数据列表
params:{limit: 10,``//默认每次请求10条
start: 0,
}, //是否还有下一页，即是否还有数据
hasMore: true,
dataEnd:false,//数据加载完了}
},
// 页面生命周期方法之onloadonLoad: function (option) {
this.getList();//页面加载获取前10条数据
},
//页面滑动到底部触发的方法之onReachBottom
onReachBottom(){
this.handleTolower();//滑动到底部加载},
// methods 里面放方法
methods:{
// 获取接口数据--因为会反复执行，封装在这里 getList() {
uni.showLoading({
title:"加载中"`
//为了网络慢，给用户的友好等待提示
});
//进行接口数据请求
uni.request({
url: getApp().globalData.url+"list",//地址
method:"POST",//方式
data: this.params,//参数
success: (result) => {
if(result.data.data.length === 0) { this.hasMore = false;
this.dataEnd=true
return; }
//数据拼接
this.hots = [...this.hots, ...result.data.data] },
complete(){
uni.hideLoading(); //loading 弹窗end } }) },
//getList() 方法end
//触底请求的方法，就是修改参数
handleTolower() {
// 1、修改参数 skip +=limit 2、重新发送请求 3、数据叠加
if(this.hasMore) {
this.params.start += this.params.limit;
this.getList();
} else{
// 弹窗形式或者其他形式告诉用户没有数据了 this.dataEnd=true
}
}
// handleTolower()
end
}
- 获取接口数据--因为要反复执行，封装在这里
