一、下拉刷新事件
1. 什么是下拉刷新
下拉刷新
是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据
的行为。
2. 启用下拉刷新
3. 配置下拉刷新窗口的样式
4. 监听页面的下拉刷新事件
- 在页面的 .js 文件中,通过
onPullDownRefresh()
函数即可监听当前页面的下拉刷新事件。 - 例如,在页面的 wxml 中有如下的 UI 结构,点击按钮可以让 count 值自增 +1:
- 在触发页面的下拉刷新事件的时候,如果要把 count 的值重置为 0,示例代码如下:
5. 停止下拉刷新的效果
- 当处理完下拉刷新后,下拉刷新的 loading 效果会一直显示,
不会主动消失
,所以需要手动隐藏下拉刷新的 loading 效果。此时,调用wx.stopPullDownRefresh()
可以停止当前页面的下拉刷新。示例代码如下:
二、上拉触底事件
1. 什么是上拉触底
上拉触底
是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据
的行为。
2. 监听页面的上拉触底事件
- 在页面的 .js 文件中,通过
onReachBottom()
函数即可监听当前页面的上拉触底事件。示例代码如下:
3. 配置上拉触底距离
三、上拉触底案例
1. 案例效果展示
2. 案例的实现步骤
- 定义获取随机颜色的方法
- 在页面加载时获取初始数据
- 渲染 UI 结构并美化页面效果
在上拉触底时调用获取随机颜色的方法
添加oading 提示效果
对上拉触底进行节流处理
-
定义获取随机颜色的方法
-
在页面加载时获取初始数据
-
渲染 UI 结构并美化页面效果
-
在上拉触底时调用获取随机颜色的方法
-
添加oading 提示效果
-
对上拉触底进行节流处理
3. 完整代码
- contact.js
Page({
// 页面的初始数据
data: {
colorList: [],
isloding: false
},
getColors() {
this.setData({
isloding: true
})
// 需要展示 loading 效果
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: () => {
wx.hideLoading()
this.setData({
isloding: false
})
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getColors()
},
// 页面上拉触底事件的处理函数
onReachBottom: function () {
if (this.data.isloding) return
this.getColors()
},
})
- contact.wxml
<view wx:for="{
{colorList}}" wx:key="index" class="num-item" style="background-color: rgba({
{item}});">{
{
item}}</view>
- contact.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;
color: black;
}