微信小程序下拉刷新功能
 
微信小程序下拉刷新
 
微信小程序自带下拉刷新的方法，如果在js中自己编写方法的话，需要将自带的方法删掉。
 实现方法如下：
 js 文件
 
//下拉刷新
  onPullDownRefresh: function () {
    this.onLoad()
  },
 
json 文件
 
"enablePullDownRefresh": true,
 
 
下拉刷新可能会受到自定义组件的影响，我之前在用的时候就收到了其他组件的影响，导致页面不能下拉刷新。

查看文档，在用page()函数注册页面的时候有这样的两个对象参数用户判断用户在最顶部下拉和到达最底部，
 
 
在小程序里，用户顶部下拉是默认禁止的，我们需要把他设置为启用，在app.json中的设置对所有页面有效，在单独页面设置则对当前页面有效；
 
看一下json文件
 
 
 
"enablePullDownRefresh": true,
 

 注意这里的true是布尔型而不是字符；
 
 
 
 
有同学说设置完之后可以下拉，但是看不到图标；
 
在app.json中这样设置；
 
 
这样下拉之后就可以看到了；
 
每个页面生成的时候已经默认为我们设置了前面提到的onPullDownRefresh函数和onReachBottom函数
 
直接上代码:
 
page为全局变量，用在在后面的加载请求，这里要和编写数据接口的同事讨论好请求；
 
 
 

分享一下我使用的上拉刷新的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() //停止下拉刷新
     }
        })
  },

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

 

在真机调试微信小程序的时候，微信小程序下拉刷新结束，但是导航栏却并没有回到原位=。=
 解决方法：
 在下拉加载结束之后，调用wx.stopPullDownRefresh()方法就好了
 
wx.stopPullDownRefresh();