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

当一个列单的记录有多条时,我们需要上拉自动加载下面的内容,当我们添加记录后,有时候页面会反应不过来,这时候就用到我们的下拉刷新了,下面讲解一下自动加载和刷新。。。。

第一步:我们在列表页的js代码中写一个公共方法来进行控制加载和刷新(类在page外面写)我用的方法为loadmore(方法可以起任意名)

var page = 1;
var isfinish = false;//加载完毕

function loadmore(that) {
  if (isfinish) return;

  wx.showLoading({
    title: '正在加载',
  })
  wx.request({
    url: 'http://www.litao1314.top/server/index.php/home/index/index',
    data: {
      page: page,
      // condition:that.data.condition
    },
    success: (res) => {
      console.log(res);
      wx.hideLoading();
      if (res.data.length > 0) {
        var list = that.data.list;
        // console.log(list);
        for (var i = 0; i < res.data.length; i++) {
          list.push(res.data[i]);
        }
        that.setData({ list: list });
        page++;
      } else {
        isfinish = true;
      }
      wx.stopPullDownRefresh();
    }
  })
}
第二步:在json文件中定义下拉(第一个必选,下面两个任选)
  "enablePullDownRefresh":true,
  "onReachBottomDistance":true,
  "navigationBarTitleText":"动态"
第三步:在js中的 onPullDownRefresh(下拉刷新), onReachBottom(上拉加载)方法中引用上面的公共函数
  //下拉刷新
  onPullDownRefresh: function () {
    console.log("下拉刷新");
    // wx.showNavigationBarLoading() //在标题栏中显示加载
    page = 1;
    isfinish = false;
    this.setData({ list: [] });

    loadmore(this);
  },

  onReachBottom: function () {
    console.log('上拉加载')
    var that = this;
    loadmore(that);
  },
这样就基本完成了,当然别忘了对页面要进行分页显示哦!!!!!!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值