微信小程序下拉刷新上拉加载更多

微信小程序下拉刷新/上拉加载更多

前言：今天说说小程序的分页功能

做这个功能之前，咱们可以先看看微信小程序官方文档，有这个API的

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

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

看一下json文件：

"enablePullDownRefresh": true,

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

在app.json中这样设置backgroundTextStyle属性为：‘dark’；

"window":{
    
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#00c29f",
    "navigationBarTitleText": "绿松洗车",
    "navigationBarTextStyle":"white"
  },

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

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

直接上代码:

下拉刷新—功能—直接在onPullDownRefresh函数里操作，代码如下：

 // 下拉刷新
  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函数里操作，代码如下：

   
  data:{
    
      page_num:1,//默认请求第一页数据
    }，

/** * 页面上拉触底事件的处理函数 */
  onReachBottom: function () {
    
    var that = this;
    // 显示加载图标
    wx.showLoading({
    
      title: '玩命加载中',
    })
    // 页数+1
    that.setData({
    
        page_num:page_num + 1;//每次下拉，页数+1
    })
    //请求列表数据接口
    wx.request({
    
      url: 'https://xxx/',
      data:{
    
          page_num:that.data.page_num,//页数
          page_size:10,//每页显示10条数据
      },
      method: "GET",
      // 请求头部
      header: {
    
        'content-type': 'application/text'
      },
      success: function (res) {
    
        // 回调函数
       	var oldData = that.data.moment;//默认一开始加载接口返回的的数据
        that.setData({
    
           moment:oldData.concat(res.data.data)//重新添加到列表里面的数据-追加
        })
        // 隐藏加载框
        wx.hideLoading();
      }
    })
 
  },

这就实现了上拉加载下拉刷新功能了，当然，如果想更好的在页面展示提示内容，可以加个变量，根据请求返回数据长度是否为0，为空就说明接口返回没有更多数据，然后setData为true，没有更多内容了！！！

有什么问题，欢迎留言，技术无止境，相互学习相互探讨，共同进步，迎接美好明天！！！