一 什么是上拉触底

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

二 监听页面的上拉触底事件

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

/** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { console.log(触发了上拉触底的事件) }

三 配置上拉触底距离

上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离。

可以在全局或页面的 .json 配置文件中，通过 onReachBottomDistance 属性来配置上拉触底的距离。

小程序默认的触底距离是 50px，在实际开发中，可以根据自己的需求修改这个默认值。

四 案例

1 展示效果

2 实现步骤

a 定义获取随机颜色的方法

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

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

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

e 添加 loading 提示效果

f 对上拉触底进行节流处理

3 定义获取随机颜色的方法

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] }) } }) }

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

/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.getColors() },

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

<view wx:for="{ {colorList}}" wx:key="index" class="num-item" style="background-color: rgba({ {item}});">{ {item}}</view> .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; }

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

/** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { // 调用获取随机颜色方法 this.getColors() }

7 添加 loading 提示效果

getColors() { // 展示 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() // 隐藏 loading 效果 } }) }

8 对上拉触底进行节流处理

a 在 data 中定义 isloading 节流阀

false 表示当前没有进行任何数据请求 true 表示当前正在进行数据请求

b 在 getColors() 方法中修改 isloading 节流阀的值

在刚调用 getColors 时将节流阀设置 true 在网络请求的 complete 回调函数中，将节流阀重置为false

c 在 onReachBottom 中判断节流阀的值，从而对数据请求进行节流控制

如果节流阀的值为 true，则阻止当前请求 如果节流阀的值为 false，则发起数据请求

9 完整代码

// pages/contact/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()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if (this.data.isloding) return
    this.getColors()
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  }
})