小程序交流群:609690978
聊一下小程序的上拉加载功能,其实很多人依赖于后台的返回的page页数和total总条数
其实这两个参数都不需要,下面介绍一下如何实现
1.首先,在json文件里配置如下:(其实配不配无所谓,我亲测不写这个也可以,但是还是写上吧,规范一点)
"enablePullDownRefresh": true
2.js内容:
Page({
data(){
isMore:true, //是否有更多数据
loadingHidden:false,//控制提示文字的显示隐藏
page:1,//页数
size:10,//每页返回数量
orderList:[],//存放数据的数组
},
//获取数据(我这里是订单列表)
getOrderList(){
let order_status = this.data.active //order_status 无视掉,我后台要传的参数
let data = { page: this.data.page, size: this.data.size, order_status: order_status}
var orderListTem = this.data.orderList //定义一个数组使其等于data里定义的接收列表的数组
util.request(api.orderList,data).then((res)=>{ //请求数据
if(res.errno == 0){
if(res.data.data.length != 0){
if (this.data.page == 1){//当页数为1时,使上面定义的数组为空
orderListTem = []
}
var orderList = res.data.data //再定义一个数组使其等于后台返回的数组
//如果后台返回的数组长度小于我每页要取的数据的长度,说明已经是最后一页了,所以不需要后台返回page和total
if (orderList.length < this.data.size) {
this.setData({
//orderList: orderListTem.concat(orderList), //合并数组 concat方法
orderList:[...orderListTem,...orderList]//合并数组,es6
isMore: false,//是否还有更多数据:没有
loadingHidden: true//隐藏加载框
})
} else {
this.setData({
orderList:[...orderListTem,...orderList],//合并数组
isMore: true,//是否还有更多数据:有
page: this.data.page + 1,//页数加1
loadingHidden: true//隐藏加载框
})
}
}
}else{
util.showErrorToast(res.msg)
}
})
},
searchScrollLower(){
this.getOrderList()
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
if(this.data.isMore){
this.searchScrollLower()
}else{
util.showErrorToast('没有更多数据')
}
},
})
<scroll-view scroll-y="true" bindscrolltolower="searchScrollLower">
………………
</scroll-view>
<loading hidden="{{loadingHidden}}">
加载中...
</loading>
<view wx:if="{{isMore}}" style="width:100%;text-align:center">上拉加载更多数据...</view>