【----------上拉触底案例------------】
实现页面上拉触底重新加载数据
【案例实现步骤】
-
定义获取随机颜色的方法
-
在页面加载时获取初始数据
-
渲染UI结构并美化页面效果
-
在上拉触底时,调用随机颜色的方法
-
添加loading提示效果
-
对上拉触底进行节流处理
【①】获取随机颜色的方法
【------home.js中------】
data: {
colorList:[]
//随机颜色列表
},
getColors(){ //定义获取颜色的方法
wx.request({ //发起请求,获取随机颜色值的数组
url: 'https://www.escook.cn/api/color',
method: "GET",
success:({data:res})=>{
this.setData({
colorList:[...this.data.colorList,...res.data] //将新的data值,赋给旧的data
})
}
})
},
【②】
在页面加载时获取初始数据
【------home.js中------】
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getColors()
},
【③】
渲染UI结构并美化页面效果
【------home.wxml中------】
<view wx:for="{{colorList}}" wx:key="index" class="colors_colors" style="background-color: rgba({{item}});">{{item}}</view>
【------home.wxss中------】
.colors_colors{
border: 1px solid red;
border-radius: 8rpx; //圆角
line-height: 200rpx; //行高
}
【④】
在上拉触底时,调用随机颜色的方法
【------home.js中------】
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
this.getColors()
},
【⑤】
添加loading提示效果
微信开发者工具-->上方操作栏(帮助)-->开发者文档-->选择API-->wx.showLoading
wx.showLoading()用于显示Loading提示框
wx.hideLoading()用于关闭Loading提示框
【------home.js中------】
getColors(){ //定义获取颜色的方法
wx.showLoading({ //展示Loading效果
title: '数据加载中',
}),
wx.request({ //发起请求,获取随机颜色值的数组
complete:()=>{
wx.hideLoading() //关闭Loading效果
}
})
},
【⑥】
对上拉触底进行节流处理
上拉触底多次,会导致数据加载量过大,数据会出现问题
步骤:
Ⅰ->在data中定义isloading节流阀
-
false:当前没有进行任何请求数据
-
true:当前正在进行请求数据
Ⅱ->在个体Colors()方法中修改isloading节流阀的值
-
在刚调用getColors时,将节流阀设置为true
-
在网络请求的complete回调函数中,将节流阀重置为false
Ⅲ->在onReachBottom中判断节流阀的值,从而对数据请求进行节流控制
-
如果节流阀的值为true,则阻止当前请求
-
如果节流阀的值为false,则发起数据请求
【------home.js中------】
/**
* 页面的初始数据
*/
data: {
isloading:false
//data数据没有进行任何数据请求
},
getColors(){ //定义获取颜色的方法
this.setData({
isloading:true //进行数据请求
}),
wx.request({
complete:()=>{
wx.hideLoading(), //关闭Loading效果
this.setData({
isloading:false
})
}
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
if(this.data.isloading) return //如果data中的isloading为true,则return出去,否则继续发起对应请求
this.getColors()
},
【全部代码】
home.js
Page({
/**
* 页面的初始数据
*/
data: {
colorList:[], //随机颜色列表
isloading:false
},
getColors(){ //定义获取颜色的方法
this.setData({
isloading:true
}),
wx.showLoading({ //展示Loading效果
title: '数据加载中',
}),
wx.request({ //发起请求,获取随机颜色值的数组
url: 'https://www.escook.cn/api/color',
method: "get",
success:({data:res})=>{
this.setData({
colorList:[...this.data.colorList,...res.data] //将新的data值,赋给旧的data
})
},
complete:()=>{
wx.hideLoading(), //关闭Loading效果
this.setData({
isloading:false
})
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
if(this.data.isloading) return //如果data中的isloading为true,则return出去,否则继续发起对应请求
this.getColors()
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
this.getColors()
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
[home.wxml]
<view wx:for="{{colorList}}" wx:key="index" class="colors_colors" style="background-color: rgba({{item}});">{{item}}</view>
[home.wxss]
.colors_colors{
border: 1px solid red;
border-radius: 8rpx; /* 圆角 */
line-height: 200rpx; /* 行高 */
}