本文已参与「新人创作礼」活动，一起开启掘金创作之路。
什么是下拉刷新:
下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为
启用下拉刷新:
1.全局开启下拉刷新
- 在app.json的window节点中,将
enablePullDownRefresh设置为true - 在实际开发中不推荐,只推荐在需要开启下拉刷新的页面单独配置
2.局部开启下拉刷新
- 在页面的.json配置文件中,将
enablePullDownRefresh设置为true
实际开发中推荐使用第二种方式
局部开启:
"enablePullDownRefresh": true
配置下拉刷新窗口的样式:
在全局或页面的.json配置文件中,通过backgroundColor和backgroundTextStyle来配置下来刷新窗口的样式,其中:
- background用来配置下拉刷新窗口的背景颜色,仅支持16进制的颜色值
- backgroundTextStyle永磊配置下拉刷新loading的样式,仅支持dark和light
{
"usingComponents": {},
"enablePullDownRefresh": true,
"backgroundColor": "#efefef",
"backgroundTextStyle": "dark"
}
在页面的.js文件中,通过onPullDownRefreash()函数即可监听当前页面的下拉刷新事件
如下面的例子中,button控制count的自增,下拉重置count为0(页面中不必要的代码没有copy) WXML:
<text>
下拉刷新后,下面的数字自增1:
</text>
{{count}}
<button bindtap="countAdd">count自加</button>
.js:
countAdd() {
this.setData({
count: this.data.count + 1
})
},
/**
* 页面的初始数据
*/
data: {
count: 0
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
console.log('下拉刷新');
this.setData({
count: 0
})
},
停止下拉刷新效果:
当你下拉刷新时,其中的function会立即执行,但是下拉刷新的效果不会立即停止,需要等几秒
当处理完下拉刷新后,下拉刷新的loading效果会一直显示,不会主动消失,所以需要手动隐藏loading效果,此时,调用wx.stopPullDownRefresh()可以停止当前页面的下拉刷新,示例:
WXML:
<text>
下拉刷新后,下面的数字自增1:
</text>
{{count}}
<button bindtap="countAdd">count自加</button>
.js:
countAdd() {
this.setData({
count: this.data.count + 1
})
},
/**
* 页面的初始数据
*/
data: {
count: 0
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
console.log('下拉刷新');
this.setData({
count: 0
})
wx.stopPullDownRefresh()
},
什么是上拉触底:
上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为
监听上拉触底事件:
在页面的.js文件中,通过onReachBottom()函数即可监听当前页面的上拉触底事件,示例代码如下:
WXML:
<text>
{{status}}
</text>
<view class="box">
</view>
.js:
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
this.setData({
status: '你触发了上拉触底function'
})
console.log('你触发了上拉触底function');
},
要注意,这里只有页面长度超出当前页面height的100%才能触发上拉触底事件,
run:
此时在PC端可以查看到你的debug:
配置上拉触底的距离:
上拉触底距离就是触发上拉触底事件时,滚动条距离页面底部的距离
可以在全局或页面的.json配置文件中,通过onReachBottomDistance属性来配置上拉触底的距离
小程序默认的触底距离是50px,在实际开发中,可以根据自己的需求修改这个默认值
例如:
"onReachBottomDistance": 150
案例效果展示
案例的实现步骤 1.定义获取随机颜色的方法 2.在页面加载时,获取初始数据 3.渲染UI结构并美化页面效果 4.在上拉触底时调用并获取随机颜色的方法 5.添加loading提示效果 6.对上拉触底进行节流处理
案例代码: WXML:
<!-- <text>
随机颜色
</text>
<text>
渲染UI结构:
</text> -->
<view wx:for="{{colorList}}" wx:key="index" class="num-item" style="background-color: rgba({{item}});">
{{item}}
</view>
.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()
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
console.log('触发上拉触底了');
if (this.data.isloading) {
return
} else {
this.getColors();
}
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
.css:
/* pages/randomColor/randomColor.wxss */
.num-item {
border: 1rpx solid #efefef;
border-radius: 8rpx;
line-height: 200rpx;
text-align: center;
margin: 15rpx;
text-align: center;
text-shadow: 0rpx 0rpx 5rpx #fff;
box-shadow: 2rpx 2rpx 7rpx rgb(0, 0, 0);
}
