微信小程序實現下(xià)拉刷新實現數據的(de)追加

作者：龍 時(shí)間：2018-08-09 浏覽：

1.思路

在微信小程序中提供了(le)下(xià)拉刷新的(de)api（onPullDownRefresh()）,那麽實現下(xià)拉刷新的(de)業務就是再下(xià)拉的(de)時(shí)候，在原有的(de)數據中追加新的(de)數據

2.代碼實現

2.1 坑一

onPullDownRefresh: function () {
    var _this =this;

    /**顯示loading */
    wx.showNavigationBarLoading();

    _this.newsrequest(_this.data.page);

    wx.stopPullDownRefresh();
    wx.hideNavigationBarLoading();   
    // console.log(_this.data.newslists)
  },
  
  
  /**請求數據 */
  newsrequest:function(page){
    var _this=this;
    // console.log(_this.data.page)
    requstFfunc.requestData('https://xxxx.cn/Public/Api/index.php', { service: 'Default.Archives', typeid: '44', orderby: '4', page:page, pagesize: '10' }).then(function (data) {
      var result = _this.newsdatadecorate(data.data.data.list);
      console.log(page)
      console.log(result)
     
      var arr=_this.data.newslists;
      if (result.length>0){
        /*此時(shí)會發現數據被添加到原有數據的(de)後邊類似上拉加載更多(duō)*/
        _this.setData({
          newslists: _this.data.newslists.concat(result)
        });
        _this.data.page++;
      }
    })
  },

我們知道數組的(de)concat方法時(shí)講參數數組拼接到原有數據後邊，所以與我們想要的(de)追加在前面不想符合，想想該數組前面追加的(de)方法時(shí)unshift()更改代碼：

2.2坑二

有人(rén)說concat方法時(shí)在數據後邊追加，那麽隻要再使用(yòng)數組反轉reverse()将數組反轉，仔細想想，這(zhè)種數據不是我們想要的(de)下(xià)拉刷新的(de)

    var arr1 = [1,2,3,4];//原來(lái)的(de)數據
    var arr2 = [5,6,7,8];//後來(lái)的(de)數據
    var arr3 = arr1.concat(arr2);//[1,2,3,4,5,6,7,8];
    var arr4 = arr3.reverse();//[8,7,6,5,4,3,2,1]
    //但是我們想要的(de)應該是
    var arr5 =[5,6,7,8,1,2,3,4]

newsrequest:function(page){
    var _this=this;
    // console.log(_this.data.page)
    requstFfunc.requestData('https://xxxx.cn/Public/Api/index.php', { service: 'Default.Archives', typeid: '44', orderby: '4', page:page, pagesize: '10' }).then(function (data) {
      var result = _this.newsdatadecorate(data.data.data.list);
      console.log(page)
      console.log(result)
     
      var arr=_this.data.newslists;
      if (result.length>0){
        _this.setData({
          newslists: _this.data.newslists.concat(result).reverse()
        })
        _this.data.page++;
      }
    })
  },

2.2坑三

newsrequest:function(page){
    var _this=this;
    // console.log(_this.data.page)
    requstFfunc.requestData('https://xxxx.cn/Public/Api/index.php', { service: 'Default.Archives', typeid: '44', orderby: '4', page:page, pagesize: '10' }).then(function (data) {
      var result = _this.newsdatadecorate(data.data.data.list);
      console.log(page)
      console.log(result)
     
      var arr=_this.data.newslists;
      if (result.length>0){
        for(var t in result){
          _this.data.newslists.unshift(result[t])
        }
        _this.data.page++;
      }
    })
  },

但是頁面的(de)數據不顯示，具體原因不詳，應該是this.data.方法設置數據，應該和(hé)頁面的(de)生命周期有關，在數據設置時(shí)，頁面已渲染,（自己想想的(de)，不知道對(duì)不對(duì)） 

這(zhè)是我們就可(kě)以通(tōng)過中介，将數據拼接好了(le)之後，再通(tōng)過this.setData()方法設置數據，這(zhè)時(shí)就可(kě)以正常顯示

newsrequest:function(page){
    var _this=this;
    // console.log(_this.data.page)
    requstFfunc.requestData('https://xxxx.cn/Public/Api/index.php', { service: 'Default.Archives', typeid: '44', orderby: '4', page:page, pagesize: '10' }).then(function (data) {
      var result = _this.newsdatadecorate(data.data.data.list);
      
      var arr=_this.data.newslists;
      if (result.length>0){
       
        for(var v in result){
          arr.unshift(result[v])
        };
        _this.setData({
          newslists:arr
        });
        
        _this.data.page++;
      }
    })
  },

上述方案雖然成功了(le)實現了(le)數據追加，但是。。。且看下(xià)邊代碼

    var arr1 = [1,2,3,4];//原來(lái)的(de)數據
    var arr2 = [5,6,7,8];//後來(lái)的(de)數據
    var arr3 = arr2.concat(arr1);//[5,6,7,8,1,2,3,4];
    
    //但是我們想要的(de)應該是
    var arr5 =[5,6,7,8,1,2,3,4]
    //此時(shí)兩個(gè)數據是不是一緻的(de)呢(ne)
    

newsrequest:function(page){
    var _this=this;
    // console.log(_this.data.page)
    requstFfunc.requestData('https://xxxx.cn/Public/Api/index.php', { service: 'Default.Archives', typeid: '44', orderby: '4', page:page, pagesize: '10' }).then(function (data) {
      var result = _this.newsdatadecorate(data.data.data.list);
      console.log(page)
      console.log(result)
     
      var arr=_this.data.newslists;
      if (result.length>0){
        _this.setData({
          newslists: result.concat(_this.data.newslists)
        });
        _this.data.page++;
      }
    })
  },