小程序中的上拉刷新（上拉触底）

什么是上拉刷新（上拉触底）

上拉刷新是指通过手指在屏幕上的上拉滑动操作，从而加载更多的数据的行为，比如分页加载等等

---

监听页面的上拉刷新

• 上拉刷新必备条件是当前页面一定要超过屏幕的高，这样页面才可以滑动

• 在页面的 .js 文件中， 通过 onReachBottom() 函数即可监听当前页面的上拉刷新事件

  onReachBottom: function () {
      console.log("上拉刷新")
  },
  

  注意：在实际开发中，分页请求数据时，需要做节流处理，即上一次请求未完成，将不再请求下一次数据

---

配置上拉刷新的触底距离

• 上拉刷新的触底距离是指触发上拉事件时，滚动条距离页面底部的距离
• 可以在全局或页面的 .json 配置文件中，通过 onReachBottomDistance 属性来配置上拉刷新的触底距离（默认的触底距离是50px）

全局页面的 .json 配置文件

"window":{
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black",
    "enablePullDownRefresh": true,
    "backgroundColor": "#2b4b6b",
    "backgroundTextStyle":"light",
    "onReachBottomDistance": 160
},

局部页面的 .json 配置文件

{
    "usingComponents": {},
    "onReachBottomDistance": 150
}

---

上拉刷新的案例

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

  data: {
      colorList:[]
  },
  
  getColors(){
      wx.request({
          url: 'https://www.escook.cn/api/color',
          method:"GET",
          success: ({data:res}) => {
              console.log(res)
              this.setData({
                  colorList:[...this.data.colorList, ...res.data]
              })
          }
      })
  },
  

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

  onLoad: function (options) {
      this.getColors()
  },
  

• 渲染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;
  }
  

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

  onReachBottom: function () {
      this.getColors()
  },
  

• 添加loading 提示效果

  getColors(){
  
      //展示 loading 效果
      wx.showLoading({
          title: '数据加载中...',
      })
  
      wx.request({
          url: 'https://www.escook.cn/api/color',
          method:"GET",
          success: ({data:res}) => {
              console.log(res)
              this.setData({
                  colorList:[...this.data.colorList, ...res.data]
              })
          },
          
          complete: () => {
          //隐藏 loading 效果
              wx.hideLoading({
                  success: (res) => {},
              })
          }
      })
  },
  

• 对上拉刷新进行节流控制

  • 在 data 中定义 isloading 节流阀

    data: {
        colorList:[],
        isloading:false
    },
    

  • 在 getColors 方法中修改 isloading 节流阀

    getColors(){
        this.setData({
            isloading:true
        })
        
        //展示 loading 效果
        wx.showLoading({
            title: '数据加载中...',
        })
        
        wx.request({
            url: 'https://www.escook.cn/api/color',
            method:"GET",
            success: ({data:res}) => {
                console.log(res)
                this.setData({
                    colorList:[...this.data.colorList, ...res.data]
                })
            },
        
            complete: () => {
                //隐藏 loading 效果
                wx.hideLoading()
                this.setData({
                    isloading:false
                })
            }
        })
    },
    

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

    onReachBottom: function () {
        if (this.data.isloading) return
        this.getColors()
    },