小程序中的上拉加载和下拉刷新
小程序中的数据请求,一般是在onLoad中进行的,但在加载时,需要随时调用,便将此封装为一个函数,随时调用
getdata(bool) {
wx.showLoading({ // loading动画(开始)
title: '加载中',
})
wx.request({
url: 'https://api-hmugo-web.itheima.net/api/public/v1/goods/search',
data:{
pagenum: this.data.pagenum,
pagesize: this.data.pagesize
},
// mathod:'GET', // get请求可以不写
success:res => { // 箭头函数的this指向是静态的
if(bool){
this.setData({
// ...展开运算符
dataList:[...this.data.dataList,...res.data.message.goods]
})
}else{
this.setData({
dataList:res.data.message.goods
})
}
this.setData({
total: res.data.message.total
})
console.log(this.data.dataList);
},
complete() {
wx.hideLoading({
title:'加载完成'
})
}
})
},
onLoad() {
// 多维数组:[[],[],[],……], 以后做项目数据很多,尽量使用多纬数组
// 请求的合法域名,必须勾选上
this.getdata(); // 调用一进入页面就进行数据请求
},
- 下拉刷新 小程序中定义了onPullDownRefresh来检测,只要进行上拉,就会触发此事件
onPullDownRefresh() {
// 将所有数据重置,并重新请求数据
this.setData({
pagenum:1,
pagesize:10,
})
this.getdata();
},
- 上拉加载 使用onReachBottom事件,进行检测,如果页面的数据长度大于或等于total总数据的长度,不能进行数据渲染,反之,进行数据渲染
onReachBottom() {
// 如果数据的长度小于total的长度,进行数组拼接
if(this.data.dataList.length < this.data.total) {
this.setData({
pagenum:this.data.pagenum+1,
})
this.getdata(true) // 传入上方,为true就进行数组拼接
}
},