下拉刷新

1.在页面json文件中开启局部下拉刷新

{
  "usingComponents": {},
  "enablePullDownRefresh": true
}

在页面js文件中，通过onPullDownRefresh()函数监听当前页面下拉刷新事件。

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

  },

下拉刷新不会主动消失，需要手动隐藏loading效果。调用wx.stopPullDownRefresh()可以停止下拉刷新

  onPullDownRefresh() {
    // ...
    wx.stopPullDownRefresh()
  },

上拉触底

上拉触底是移动端专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为，更多实现的是分页功能。在js文件中，通过onReachBottom()函数监听上拉触底事件。（调试不生效试着清下缓存）

  onReachBottom() {

  },

节流处理

1. 在data中定义isLoading节流阀

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

2. 在请求接口中修改isLoading节流阀的值

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

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

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

scroll-view下拉刷新

<scroll-view
 class="scroll-y"
 scroll-y="true"
 lower-threshold="100"
 bindscrolltolower="getMore"
 enable-back-to-top
 refresher-triggered="{{isTriggered}}"
 bindrefresherrefresh="refreshHandler"
 refresher-background="#f7f7f8"
 refresher-default-style="black"
 refresher-enabled
>
 ......
</scroll-view> 

Page({
  data: {
   numList:[1,2,3],
   isTriggered:false,
  },
  refreshHandler(){
    wx.showToast({
      title: '下拉刷新...',
    })
    this.setData({
      numList:[1,2,3],
      isTriggered:false
    })
    wx.hideLoading()
  },
  getMore(){
    wx.showLoading({
      title: '数据加载中...',
    })
    setTimeout(()=>{
      const lastNum=this.data.numList[this.data.numList.length-1]
      const newArr=[lastNum+1,lastNum+2,lastNum+3]
      this.setData({
        numList:[...this.data.numList,...newArr]
      })
      wx.hideLoading()
    },1500)
  },
......