参考:uni-app官网
1、pages.json在配置所需页面可以下拉加载enablePullDownRefresh:true
{
"path": "banner/index/index",
"style": {
"navigationBarTitleText": "XXXXX",
"enablePullDownRefresh": true
}
},
2、我声明了页面请求的条件变量
data(){
return{
// 收到的
listData: [],//信息list
listAll: 0,//信息总数
listPage: 1,//请求页数
listLoading: false,//是否正在加载
}
}
3、写在method里面的数据请求函数
receivedLetter() {
// 停止刷新请求条件
if (this.listData && this.listData.length !== 0 && this.listData.length >= this.listAll) {
uni.stopPullDownRefresh()
return
}
this.listLoading = true//开始请求
this.$api.getMyDetailData({
biz_id: this.$store.state.user_biz_id,//参数根据业务需求
ptype: "get",
page: this.listPage,//重点是这个会变的请求页码
limit: 10
}).then(res => {
console.log("请求", res)
this.listLoading = false //请求完成
this.listData.push(...res.data) //追加数据
uni.stopPullDownRefresh() //停止刷新
})
},
4、在页面首次加载完的时候,进行自动进行下拉请求第一页数据
mounted() {
uni.startPullDownRefresh()
},
// 下拉触底函数
onReachBottom() {
//加载中就不进行加载
if (this.listLoading) {
return
} else {
//加载下一页
this.receivedLetter()//第一次的时候listPage=1
this.listPage++
}
},
// 监听下拉更新 (重新获取第一页信息)
onPullDownRefresh() {
//初始化信息
this.listPage = 1
this.listLoading = false
this.listData = []
this.listAll = 0
this.receivedLetter()
},