小程序--下拉刷新/上拉触底

一、什么是下拉刷新

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

二、如何开启下拉刷新

①全局开启下拉刷新

在app.json的windows节点中，将enablePullDownRefresh设置为true

②局部开启下拉刷新

在页面的.json配置文件中，将enablePullDownRefresh设置为true

【注】：推荐局部下拉刷新，因为在实际开发当中，不是所有的页面都需要下拉刷新的功能

三、配置下拉刷新的样式

在.json配置文件中，将 backgroundColor和 backgroundTextStyle来配置下拉刷新窗口的样式

• backgroundColor用来配置下拉刷新 窗口的背景颜色，仅支持16进制的颜色值
• backgroundTextStyle用来配置下拉刷新 loading的样式，仅支持 dark和 light

四、监听页面下拉刷新事件

在.json配置文件中，通过 onPullDownRefresh()函数，监听当前页面的刷新事件

• 小练习

count初始值为0，点击按钮后，count值+1，下拉刷新后，count恢复成初始值0

【------home.wxml中------】

 

<view>Count的初始值是：{{count}}</view>                        //页面中显示Count初始值
<button bindtap="addConut">Count+1</button>          //页面中Count+1按钮

【------home.js中------】

data: {
    count:0                                                                     //初始值为0
  },
  addConut(){
    this.setData({                                                           //Count=初始Count+1
      count:this.data.count+1
    })
  },

/**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    this.setData({
      count:0                                                                 //下拉Count值，恢复成初始值0
    })

  },

五、停止下拉刷新的效果

当处理完下拉刷新后，下拉刷新的 loading效果会一直显示，不会主动消失，所以需要手动隐藏loading效果，这个时，我们就需要用到 wx.stopPullDownRefresh()， 停止当前页面的下拉刷新

• 小练习

count初始值为0，点击按钮后，count值+1，下拉刷新后，count恢复成初始值0

【------home.wxml中------】

 

<view>Count的初始值是：{{count}}</view>                        //页面中显示Count初始值
<button bindtap="addConut">Count+1</button>          //页面中Count+1按钮

【------home.js中------】

data: {
    count:0                                                                     //初始值为0
  },
  addConut(){
    this.setData({                                                           //Count=初始Count+1
      count:this.data.count+1
    })
  },

/**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    this.setData({
      count:0
    })
    //当数据重置成功之后，调用此函数，关闭下拉刷新效果
    wx.stopPullDownRefresh()                                                   //下拉刷新后，loading效果消失
  },

六、上拉触底事件

 【什么是上拉触底】

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

 【监听页面的上拉触底事件】

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

【配置上拉触底距离】

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

注：（默认距离是50px,滚动条距离页面不足50px时，触发事件）

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