简介

小程序项目中有个需求：用户聊天时可以下拉加载历史消息。于是看了下小程序自带的方法，比较简单，分享给大家。

具体实现

1、在要实现效果的页面的相关 .json文件中设置window属性：下拉事件。还可以追加一个加载过程中的动画样式，但是只支持两种（“dark”、“light”）。

 "enablePullDownRefresh": true,
 "backgroundTextStyle": "dark"

2、在js里设置onPullDownRefresh方法【注意当处理完数据刷新后，需要停止当前页面的下拉刷新，采用wx.stopPullDownRefresh即可】。

3、wx.showNavigationBarLoading方法可以实现顶部标题栏也有加载转圈效果，更加方便于用户识别加载中的状态效果。

 onPullDownRefresh: function() {
    console.log("++++++下拉刷新++++++");
    wx.showNavigationBarLoading(); //在标题栏中显示加载中的转圈效果
    wx.request({
      url: "", // https://... + URL
      data: {},
      method: 'GET',
      // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      // header: {}, // 设置请求的 header
      success: function(res) {
        // success
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
        setTimeout(function () {
          wx.hideNavigationBarLoading(); // 完成数据操作后停止标题栏中的加载中的效果
          wx.stopPullDownRefresh(); // 停止下拉刷新过程
          console.log("------停止刷新------");
        }, 2000)
      }
    });
  }

4、效果图

拓展

onReachBottom()
监听用户上拉触底事件。

（1） 可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance，类型为number，默认,50，单位是px。

onReachBottomDistance: 50

（2）在触发距离内滑动期间，本事件只会被触发一次【注意：只会被触发一次】。

当然，在scroll-view里设定bindscrolltoupper和bindscrolltolower实现微信小程序下拉也是可以的，只是相对复杂化了（既然做的微信小程序，有封装好的方法，直接调用不好吗，还减少不必要的事件派发），就不一 一介绍了。

最后

觉得有用的朋友请用你的金手指点一下赞，或者评论留言一起探讨技术！