如下图,往下面拖动时,会触发getColors
函数,获取颜色数据并使colorList
自增,但是你在数据没有返回之前多次触发上拉触底,那么就会多次request
处理:
1.在data中定义idloading节流阀
- false表示当前没有进行任何数据请求
- true表示当前正在进行和数据请求
2.在getColors()方法中修改isloading节流阀的值
- 在刚调用getColors时将节流阀设置为true
- 在网络请求的complete回调函数中,将节流阀重置为false
3.在onReachBottom中判断节流阀的值,从而对数据请求进行节流控制
- 如果节流阀的值为true,则阻止当前请求
- 如果节流阀的值为false,则发起数据请求
示例:
.js:
// pages/randomColor/randomColor.js
Page({
/**
* 页面的初始数据
*/
data: {
// 随机颜色的列表
colorList: [],
isloading: false
},
// 获取随机颜色的方法
getColors() {
this.setData({
isloading: true
})
wx.showLoading({
title: "数据加载中..."
});
wx.request({
url: 'https://www.escook.cn/api/color',
method: 'GET',
success: ({
data: res
}) => {
this.setData({
colorList: [...this.data.colorList, ...res.data]
})
},
// 不论失败与否都会执行下面这个函数
complete: () => {
// loading需要自己手动关闭
wx.hideLoading();
this.setData({
isloading: false
})
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getColors()
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
console.log('触发上拉触底了');
if (this.data.isloading) {
return
} else {
this.getColors();
}
},
触发上拉触底会判断一下isloading
的值,如果为true,则不请求,如果为false,则请求