微信小程序 下拉刷新onPullDownRefresh和上拉触底

下拉刷新onPullDownRefresh

1. enablePullDownRefresh支持

1. 全局设置：在app.json里面设置

"window": {
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": true
}

2. 个别页面设置：在页面中尾缀为json的文件中设置

{
  "navigationBarTitleText": "",
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark"
}

2. onPullDownRefresh

在页面中的onPullDownRefresh，书写自己的请求，在完成之后，调用停止下拉

/**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    // 显示顶部刷新图标
    wx.showNavigationBarLoading();
    let self = this;
    console.log('jjjj');
    // 隐藏导航栏加载框
    wx.hideNavigationBarLoading();
    // 停止下拉动作
    wx.stopPullDownRefresh();
  },

注意：

在Mac上使用微信小程序开发工具时，onReachBottom可以触发，onPullDownRefresh却无法触发，但是预览时onPullDownRefresh是可以触发的

原因：用mac一般上下拉都是两只手指滑动触摸板，但。。。。。。坑就在这里了=》焦点在页面上，然后一只手指按住(一定要按下去)触摸板往下拉才会触发onPullDownRefresh

上拉触底事件onReachBottom

1. 配置onReachBottomDistance

  在页面尾缀为json的文件里面，配置onReachBottomDistance（页面上拉触底事件触发时距页面底部距离，单位为px），之后当滑动到距离底部Npx处，触发在page的onReachBottom中添加的事件。

{
  "onReachBottomDistance": 50
}

2. 未配置onReachBottomDistance

  未在页面尾缀为json的文件里面，配置onReachBottomDistance（页面上拉触底事件触发时距页面底部距离，单位为px）。这样是当滑动到距离底部0px处，触发在page的onReachBottom中添加的事件。

注意：

当页面内容不超过屏高，则onReachBottom无法触发