小程序的页面事件

一、下拉刷新事件

---

1. 什么是下拉刷新

• 下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。

2. 启用下拉刷新

3. 配置下拉刷新窗口的样式

4. 监听页面的下拉刷新事件

• 在页面的 .js 文件中，通过onPullDownRefresh()函数即可监听当前页面的下拉刷新事件。
• 例如，在页面的 wxml 中有如下的 UI 结构，点击按钮可以让 count 值自增 +1：
  
• 在触发页面的下拉刷新事件的时候，如果要把 count 的值重置为 0，示例代码如下：
  

5. 停止下拉刷新的效果

• 当处理完下拉刷新后，下拉刷新的 loading 效果会一直显示，不会主动消失，所以需要手动隐藏下拉刷新的 loading 效果。此时，调用wx.stopPullDownRefresh()可以停止当前页面的下拉刷新。示例代码如下：
  

二、上拉触底事件

---

1. 什么是上拉触底

• 上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。

2. 监听页面的上拉触底事件

• 在页面的 .js 文件中，通过onReachBottom()函数即可监听当前页面的上拉触底事件。示例代码如下：
  

3. 配置上拉触底距离

三、上拉触底案例

---

1. 案例效果展示

2. 案例的实现步骤

1. 定义获取随机颜色的方法
2. 在页面加载时获取初始数据
3. 渲染 UI 结构并美化页面效果
4. 在上拉触底时调用获取随机颜色的方法
5. 添加oading 提示效果
6. 对上拉触底进行节流处理

1. 定义获取随机颜色的方法
   

2. 在页面加载时获取初始数据
   

3. 渲染 UI 结构并美化页面效果

4. 在上拉触底时调用获取随机颜色的方法
   

5. 添加oading 提示效果
   

6. 对上拉触底进行节流处理
   

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;
}