小程序上拉加载,下拉刷新

小程序上拉加载,下拉刷新

  data: {
    collectinformation: null,
    number: 1,
    size: 10,
    isOpenLoading: true,
    isEmpty: true,
    isLoadingTrue: true,
    mylist: null,
    mylists: null,
  },
onPullDownRefresh部分代码
  //下拉刷新
  onPullDownRefresh: function(e) {
    this.setData({
      isEmpty: true,
      number: 1,
      mylist: [],
      isLoadingTrue: true
    })
    this.getList();
  },
onReachBuottom部分
isOpenLoading就是添加的闸门,目的是防止一个方法还没有结束就发起另外一个请求,造成num的混乱
  onReachBottom: function(e) {
    if (this.data.isOpenLoading) {
      this.getList()
    } else {
      return
    }
  },
getList()部分
call.myRequest这边被我封装了,可以直接用自己的
getList: function() {
    var that = this
    that.setData({
      mylists: [],
      isShowIcon: false,
      isOpenLoading: false
    })
    wx.showNavigationBarLoading()
    var myData = {
      category: 0,
      number: that.data.number,
      size: that.data.size
    }
    call.myRequest("/user/collections/", that.listSuc, "POST", myData)
  },
  listSuc: function(data, res) {
    var that = this
    var totalList = [];
    that.data.mylists = data.value
    if (!that.data.mylists || !that.data.mylists.length) {
      that.setData({
        isLoadingTrue: false,
        isShowIcon: true,
        isOpenLoading: false
      });
      wx.hideNavigationBarLoading();
      wx.stopPullDownRefresh();
      return
    }
    if (!that.data.isEmpty) {
      totalList = that.data.mylist.concat(that.data.mylists);
    } else {
      totalList = that.data.mylists
      that.data.isEmpty = false
    }
    that.setData({
      mylist: totalList,
      isLoadingTrue: true,
      isShowIcon: true,
      isOpenLoading: true
    })
    wx.hideNavigationBarLoading();
    wx.stopPullDownRefresh();
    that.data.number += 1
  },

onLoad部分

  onLoad: function(options) {
    this.$wuxRater = app.Wux().$wuxRater
    wx.setNavigationBarTitle({
      title: '我的收藏',
    })
    this.onPullDownRefresh()
  },
有个不太友好的问题就是在刷新的时候我就清空了mylists中的数据,虽然加了loading,感觉还是不太好。尤其是在突然断网的情况下,页面上就剩下几个loading,倍感凄凉。

posted on 2018-10-25 09:53  诚明小巫  阅读(417)  评论(0编辑  收藏  举报

导航