下拉刷新
下拉刷新,指的是在移动设备中,手指进行下拉华东操作,从而重新加载页面数据的行为。
如何在小程序中启用下拉刷新
全局开启
在app.json中进行配置window节点,并且将enablePullDownRefresh设置为true
局部开启
在页面的json文件中配置,将enablePullDownRefresh设置为true
配置下拉刷新窗口样式
在全局或页面的json文件中配置,backgroundColor和backgroundTextStyle来配置刷新窗口:
- backgroundColor用来配置下拉刷新窗口的背景颜色,仅支持16进制的颜色值
- backgroundTextStyle用来配置下拉刷新loading的样式,仅支持dark和light
监听下拉刷新事件
在页面的js文件中,通过onPullDownRefresh() 函数即可监听当前页面的下拉刷新事件。
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
console.log("触发了下拉刷新");
},
停止下拉刷新效果
因为下拉刷新缺乏自动关闭方法,我们可以使用方法进行自动关闭
onPullDownRefresh() {
console.log("触发了下拉刷新");
wx.stopPullDownRefresh()
},
上拉触底案例
- 定义一个随机颜色的方法
- 在页面加载的时候获取初始值数据
- 渲染UI结构并美化页面效果
- 在上拉触底时调用随机颜色方法
- 添加loading提示效果
- 对上拉触底进行节流处理
获取随机颜色方法
getColors(){
wx.request({
url: 'https://mock.apifox.com/m1/4376673-4020798-default/api/getcolorlist',
method:'GET',
success:(res)=>{
console.log(res.data);
this.setData({
colorList:[...this.data.colorList,...res.data.colorlist]
})
}
})
},
上拉触底
:::info
上拉触底,是通过手指在屏幕上的上拉华东操作,从而加载更多数据的行为
:::
一般在移动端,我们用于分页处理
监听页面上的上拉触底事件
在页面的js文件中,通过onReachBottom()函数可以监听当前页面的上拉触底事件:
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
console.log("触发上拉触底");
},
同一时间只允许触发一次请求
配置上拉触底距离
上拉触底距离,和上拉触底距离一样,就是滚动条,到底部距离设置
可以在json文件中进行配置,通过onReachBottomDistance属性来配置上拉触底的距离,默认为50px
wxml代码
<view wx:for="{{colorList}}" class="num-item" style="background-color:{{item.color}}">{{item.color}}</view>
wxss代码
.num-item{
border: 1rpx solid #efefef;
border-radius: 8rpx;
line-height: 200rpx;
margin: 15rpx;
text-align: center;
text-shadow: 0rpx 0rpx 5rpx #fff;
box-shadow: 1rpx 1rpx 6rpx #aaa;
}
js请求代码
getColors(){
wx.request({
url: 'https://mock.apifox.com/m1/4376673-4020798-default/api/getcolorlist',
method:'GET',
success:(res)=>{
console.log(res.data);
this.setData({
//[]列表中有两个值,第一个值为原来的列表,第二个值为新获取的列表
colorList:[...this.data.colorList,...res.data.colorlist]
})
}
})
},
上拉触底获取随机颜色
只需要在上拉触底函数中再次调用getcolor函数即可
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
this.getColors()
},
调用wx.showloading进行加载效果展示
getColors(){
// 在加载前调用展示loading方法
wx.showLoading({
title: '数据正在加载中',
})
wx.request({
url: 'https://mock.apifox.com/m1/4376673-4020798-default/api/getcolorlist',
method:'GET',
success:(res)=>{
console.log(res.data);
this.setData({
colorList:[...this.data.colorList,...res.data.colorlist]
})
},
// 在请求结束后调用wx.hideLoading()效果
complete:()=>{
wx.hideLoading()
}
})
},
关于wx.showloading()详情可以参考官方文档
对上拉触底进行节流处理
如果多次请求数据,造成数据大量加载,节流就是上一次数据加载完后,在此加载下一页数据
节流步骤:在data中定义isloading节流阀->在getColor中修改isloading的值->在onReachBottom中判断节流阀值,从而对请求进行控制
data: {
// 导航传递过来的参数
query:{},
colorList:[],
isloading:false
},
getColors(){
// 设置节流true
this.setData({
isloading:true
})
// 在加载前调用展示loading方法
wx.showLoading({
title: '数据正在加载中',
})
wx.request({
url: 'https://mock.apifox.com/m1/4376673-4020798-default/api/getcolorlist',
method:'GET',
success:(res)=>{
console.log(res.data);
this.setData({
colorList:[...this.data.colorList,...res.data.colorlist]
})
},
// 在请求结束后调用wx.hideLoading()效果
complete:()=>{
// 重置节流
this.setData({
isloading:false
})
wx.hideLoading()
}
})
},
触发事件判断节流
onReachBottom() {
// 判断节流
if (this.data.isloading) return
this.getColors()
},