微信小程序下拉刷新和上拉加载的实现

微信小程序开发交流qq群   173683895

   承接微信小程序开发。扫码加微信。

正文：

一： 下拉刷新

下拉刷新两个步骤就能实现。

1.在要实现下拉刷新的页面的json配置文件里面加上

"enablePullDownRefresh": true, //开启下拉刷新

"backgroundColor": "#f0145a" //设置背景颜色，如果不设置背景颜色，就看不见下拉刷新的加载动画了，因为加载动画和背景色颜色一样

 

 

2.在要实现下拉刷新的页面下拉刷新的函数

onPullDownRefresh() {

wx.showNavigationBarLoading() //在标题栏中显示加载

},

下拉刷新完成以后，隐藏下拉刷新代码：

wx.stopPullDownRefresh();

 

 

二. 上拉加载更多

 

  // 帖子滚动到底部的加载事件
  lower:function(e){
    console.log(e)
    var that = this
    var url = util.apiUrl + 'FWinfo/tiezi_list'
    util.request(url, 'get', { 'program_id': app.program_id, 'id': that.data.msg_id }, '正在加载数据', function (res) {
      for (var i = 0; i < res.data.length; i++) {
        res.data[i].image = res.data[i].image.split(",")
      }
      var msg = that.data.msg.concat(res.data)
      that.setData({
        msg: msg,
        msg_id: res.data[res.data.length - 1].id
      })
    })
  },