下拉刷新与上拉加载更多

• 下拉刷新

1、在所需要操作的json文件中添加

{
  "enablePullDownRefresh":true
}

添加了之后就可以向下拖动上方留白的效果
2、给下拉留白区添加颜色以及过渡效果
在app.json文件的window中添加以下内容

"window": {
   "backgroundColor":"#f01450",
}

image.png

即可出现以上效果
3、在js文件中添加监听函数

  onPullDownRefresh(){
    wx.showNavigationBarLoading()
    setTimeout(function () {
      wx.hideNavigationBarLoading() //完成停止加载
      wx.stopPullDownRefresh() //停止下拉刷新
    }, 1500);
  },

• wx.showNavigationBarLoading()业务办理左侧出现转圈效果
• wx.hideNavigationBarLoading()停止转圈效果
• wx.stopPullDownRefresh()收回下拉效果

• 下拉加载更多

在onReachBottom函数中执行相关的代码