文章目录

• 前言
• 1.小程序的界面和效果：
• 2.步骤：
• 3.添加wxss中的样式：
• 4.json文件中进行配置下拉刷新为true：
• 5.js中处理：
• 5.1添加data数据：
• 5.1加载数据方式用下拉的方式:
• 5.2上拉刷新处理：
• 5.3页面上拉触底事件：
• 5.4调取接口实现数据加载逻辑:
• 6.结语：

前言

编程是无国界、无语言区分的，微信小程序作为纯国产的编程语言诞生真的很让人骄傲，并且作为后端程序员，小程序的可以让自己的接口自己用，实现全栈的呈现。本片来介绍下小程序的下拉刷新功能实现。

1.小程序的界面和效果：

2.步骤：

wxml中添加元素展示加载更多和加载全部文案：

<view class="loading" hidden="{{!searchLoading}}">正在载入更多...</view>  
<view class="loading" hidden="{{!searchLoadingComplete}}">已加载全部</view>

3.添加wxss中的样式：

.loading{  
  padding: 10rpx;  
  font-size: 26rpx;
  color:#666;
  text-align: center;  
}

4.json文件中进行配置下拉刷新为true：

{
  
   "enablePullDownRefresh": true
}

5.js中处理：

5.1添加data数据：

data: {
    pageNo: 1, // 设置加载的第几次，默认是第一次  
    pageSize: 10, //返回数据的个数  
    searchLoading: false, //"上拉加载"的变量，默认false，隐藏  
    searchLoadingComplete: false, //“没有数据”的变量，默认false，隐藏  
    list_data:[]
      },

5.1加载数据方式用下拉的方式:

 onLoad: function(options) {
    wx.startPullDownRefresh();
  },

5.2上拉刷新处理：

 onPullDownRefresh:function(options){
 
    this.setData({
      pageNo: 1,
      storelist:[],
      searchLoading: true, //"上拉加载"的变量，默认false，隐藏  
      searchLoadingComplete: false //“没有数据”的变量，默认false，隐藏  
    })
    this.findDataList();
   
   
  },

5.3页面上拉触底事件：

 /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {
    if (!this.data.searchLoadingComplete){
      var currentPageNo = this.data.pageNo;
      this.setData({
        pageNo: currentPageNo + 1,
 
      })
      this.findDataList();
    }
  },

5.4调取接口实现数据加载逻辑:

 findDataList:function(){
    var _this = this;
    wx.request({
      url: API_USer_URL,
      method: 'POST',
      header:{
        'Content-Type': 'application/json'
      },
      data:{
        "page":_this.data.pageNo,
        "size": _this.data.pageSize,
        "num":10
    
      },
      success:function (res){
        if (_this.data.pageNo==1){
          wx.stopPullDownRefresh();//下拉刷新收起来
        }
        console.log('success', res);
        if (res.data.data.totalPage<=_this.data.pageNo){//小于个数，表示没有更多了
          _this.setData({
            searchLoading: false,
            searchLoadingComplete :true
          })
        }
        // debugger;
        _this.setData({    
          // storelist: _this.data.storelist.concat(result.retailList)
            // list_data: res.data.data.list,
            list_data: _this.data.list_data.concat(res.data.data.list)
          })    
          wx.stopPullDownRefresh();
      }

    

    })
  },

6.结语：

效果图1:

效果图2:

这样就完成了小程序下拉刷新分页的处理，赶紧应用到你的小程序中吧。