小程序中的下拉刷新和上拉加载

---

前言

• 文章案例基于2.14.1基础调试库编写
• 有关详细的配置可见官方文档：

微信官方文档：小程序

---

一、实现下拉刷新：

配置项	描述
enablePullDownRefresh	是否开启下拉刷新
backgroundColor	下拉窗口背景色
backgroundTextStyle	下拉 loading 的样式，仅支持 dark / light

1.全局配置

• 位于app.json文件"window"级下添加配置：

"window": {
    "enablePullDownRefresh": true,
    "backgroundColor": "#dbdbdd",
    "backgroundTextStyle": "dark"
  },

2.局部配置

• 局部配置用来规范只有部分页面可以下拉刷新
• 在该页面json配置文件下添加配置项：

{
  "enablePullDownRefresh": true,
  "backgroundColor": "#dbdbdd",
  "backgroundTextStyle": "dark"
}

注：“backgroundColor”、"backgroundTextStyle"可按需求觉得加不加或修改值

3.配置下拉事件

• 在页面js文件下设定该页面触发下拉时要执行的事件

例：

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  	//请求商品列表
    this.getShopList()
  },

getShopList() {
    this.data.shopList._page = 1
    wx.request({
      url: 	`https://xxx.xxxx.xx/xxxx/shops`,
      data: this.data.shopList,
      method: 'GET',
      success: (result) => {
        console.log(result.data);
        this.setData({
          shops:result.data
        })
      },
      complete:()=> {
        wx.stopPullDownRefresh()
      }
    })
  },

4.关闭下拉窗口

• 开启了下拉刷新后，下拉窗口不会自行关闭（编译器预览会自行关闭，但实际上到手机上预览效果会发现不会自行关闭）
• 故而需要自行配置 “wx.stopPullDownRefresh()” 关闭下拉窗口：

例：

getShopList() {
    this.data.shopList._page = 1
    wx.request({
      url: 	`https://xxx.xxxx.xx/xxxx/shops`,
      data: this.data.shopList,
      method: 'GET',
      success: (result) => {
        console.log(result.data);
        this.setData({
          shops:result.data
        })
      },
      //在请求结束时调用 wx.stopPullDownRefresh() 关闭下拉窗口
      complete:()=> {
        wx.stopPullDownRefresh()
      }
    })
  },

二、实现上拉加载

• 在页面js文件 onReachBottom监听函数 下设定该页面触发上拉加载时要执行的事件
• 在触发上拉加载时建议配置wx.showLoading()用于做提示和开启遮罩层防止误触

例：

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
      //开启 Loading提示
      //开启 mask遮罩层 防止用户误触
      wx.showLoading({
        title: '数据正在加载中...',
        mask:true
      })
      wx.request({
        url: `https://xxx.xxxx.xx/xxxx/addShops`,
        data: this.data.shopList,
        method: 'GET',
        success: (result) => {
          this.setData({
            //拼接原商品和请求到的商品，实现加载更多的功能
            shops:[...this.data.shops,...result.data]
          })
        },
        //请求完成关闭 Loading提示
        complete:()=> {
          wx.hideLoading()
        }
      })
  },

---

提示：文章到此结束，若有不足还望各位指出。