微信小程序之实现下拉刷新效果

本文章将主要介绍微信小程序如何实现简单的下拉刷新效果的，代码简单明了。

主要 api

• wx.showLoading(Object object) 显示 loading 提示框
• wx.hideLoading(Object object) 关闭 loading 提示框
• wx.startPullDownRefresh(Object object) 开始下拉刷新。调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
• wx.stopPullDownRefresh(Object object) 停止当前页面下拉刷新。
• wx.request(Object object) 发起网络请求

代码实现

page.json || app.json

{	 // 允许这个页面进行下拉刷新动作
     "enablePullDownRefresh": true  
}

注意："enablePullDownRefresh": true 可以写在两个位置，全局的app.json 或者是 page.json。app.json 是全局型的下拉刷新，而page.json 是单个页面的下拉刷新。

page.js

Page ({
	// 刷新
    onRefresh(){
        // 显示loading提示框。需主动调用 wx.hideLoading 才能关闭提示框.
        wx.showLoading({
          title: '刷新中...',
        })
        // 获取新数据
        this.getData();
      },
      
    // 网络请求，获取数据
    getData(){
    	wx.request({
            url: 'xxxx',
            // 网络请求执行完后将执行的动作
            complete(res){
            	// 1. 更新数据的操作。。。
                // 2. 隐藏loading 提示框
                wx.hideLoading();
                // 3. 停止下拉刷新，在需要刷新结束时调用该api，否则，页面将会保持下拉状态、不会回弹。
                wx.stopPullDownRefresh();
      	  	}
    	})   
    },
   
    // 页面相关事件处理函数--监听用户下拉动作
    onPullDownRefresh: function () {
        // 调用刷新时将执行的方法
    	this.onRefresh();
    }
})

此外，除了上面的下拉刷新，有时候可能是在某个事件进行时触发刷新动作，此时可以调用wx.startPullDownRefresh(Object object) 此api的作用是：开始下拉刷新。调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。