查看文档，在用page()函数注册页面的时候有这样的两个对象参数用户判断用户在最顶部下拉和到达最底部，



在小程序里，用户顶部下拉是默认禁止的，我们需要把他设置为启用，在app.json中的设置对所有页面有效，在单独页面设置则对当前页面有效；

看一下json文件

 

"enablePullDownRefresh": true,



注意这里的true是布尔型而不是字符；

 



有同学说设置完之后可以下拉，但是看不到图标；

在app.json中这样设置；



这样下拉之后就可以看到了；

每个页面生成的时候已经默认为我们设置了前面提到的onPullDownRefresh函数和onReachBottom函数

直接上代码:

page为全局变量，用在在后面的加载请求，这里要和编写数据接口的同事讨论好请求；

 

 // 下拉刷新
  onPullDownRefresh: function () {
    // 显示顶部刷新图标
    wx.showNavigationBarLoading();
    var that = this;
    wx.request({
      url: 'https://xxx/?page=0',
      method: "GET",
      header: {
        'content-type': 'application/text'
      },
      success: function (res) {
        that.setData({
          moment: res.data.data
        });
        console.log(that.data.moment);
        // 隐藏导航栏加载框
        wx.hideNavigationBarLoading();
        // 停止下拉动作
        wx.stopPullDownRefresh();
      }
    })
  },

 

上拉加载更多：

 

 

/**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    var that = this;
    // 显示加载图标
    wx.showLoading({
      title: '玩命加载中',
    })
    // 页数+1
    page = page + 1;
    wx.request({
      url: 'https://xxx/?page=' + page,
      method: "GET",
      // 请求头部
      header: {
        'content-type': 'application/text'
      },
      success: function (res) {
        // 回调函数
        var moment_list = that.data.moment;
        const oldData = that.data.moment;
        that.setData({
           moment:oldData.concat(res.data.data)
        })
        // 隐藏加载框
        wx.hideLoading();
      }
    })

  },

完成。

推荐一下自己的小程序 有兴趣可以交流

 






 

 

微信小程序下拉刷新功能
微信小程序下拉刷新
微信小程序自带下拉刷新的方法，如果在js中自己编写方法的话，需要将自带的方法删掉。

实现方法如下：

js 文件
//下拉刷新
  onPullDownRefresh: function () {
    this.onLoad()
  },

json 文件
"enablePullDownRefresh": true,


下拉刷新可能会受到自定义组件的影响，我之前在用的时候就收到了其他组件的影响，导致页面不能下拉刷新。

微信小程序下拉刷新上拉加载的两种实现方法，1、利用"onPullDownRefresh"和"onReachBottom"方法实现小程序下拉刷新上拉加载，2、在scroll-view里设定bindscrolltoupper和bindscrolltolower实现微信小程序下拉刷新上拉加载。
利用"onPullDownRefresh"和"onReachBottom"方法
在js文件里直接写"onPullDownRefresh"和"onReachBottom"方法即可；
xml
.........
js
onPullDownRefresh: function() {
// Do something when pull down.
console.log('刷新');
},
onReachBottom: function() {
// Do something when page reach bottom.
console.log('circle 下一页');
},
在scroll-view里设定bindscrolltoupper和bindscrolltolower
在scroll-view里设定bindscrolltoupper和bindscrolltolower，然后在js里写好触发事件后对应的方法。[注意，使用这个模式一定要设置scroll-view的高度，100%不知道为什么设置后没效果，建议使用100vh]
xml
..........
js
onPullDownRefresh: function() {
// Do something when pull down.
console.log('刷新');
},
onReachBottom: function() {
// Do something when page reach bottom.
console.log('circle 下一页');
},
原文：http://www.jianshu.com/p/150ab73f1fa7
↓ 查看全文

分享一下我使用的上拉刷新的Demo;
其他的涉及不到  以下代码到js就可以
将代码写到js中Page里面
//下拉刷新
  onPullDownRefresh: function () { //下拉刷新
        wx.showToast({
        title: '加载中',
        icon: 'loading',
        duration: 400 
      });
        console.log('--------下拉刷新-------')
        wx.showNavigationBarLoading() //在标题栏中显示加载
	//这里是你请假刷新的地址 请求的地址。和你Onload 里面wx.request请求一样 粘贴过来就行

              wx.request({
            url: ''
            method: '',
            data: {},
            header: {
                'Accept': 'application/json'
            },
            success: function(res) {
       
                }
                that.setData({studate:res.data.data});
                //that.data.items = res.data
            },
            complete: function() {
      // complete
      wx.hideNavigationBarLoading() //完成停止加载
      wx.stopPullDownRefresh() //停止下拉刷新
     }
        })
  },

有任何建议或者迷惑请在评论区回答 ，或者私信我。