无夜游魂

微信小程序实现下拉刷新怎么实现数据的追加

2021-01-20 14:00:59

1.思路

在微信小程序中提供了下拉刷新的api（onPullDownRefresh()）,那么实现下拉刷新的业务就是再下拉的时候，在原有的数据中追加新的数据

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/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)
        });
        _this.data.page++;
      }
    })
  },

我们知道数组的concat方法时讲参数数组拼接到原有数据后边，所以与我们想要的追加在前面不想符合，想想该数组前面追加的方法时unshift()更改代码：

2.2坑二

有人说concat方法时在数据后边追加，那么只要再使用数组反转reverse()将数组反转，仔细想想，这种数据不是我们想要的下拉刷新的

    var arr1 = [1,2,3,4];//原来的数据
    var arr2 = [5,6,7,8];//后来的数据
    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]
    //但是我们想要的应该是
    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/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/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++;
      }
    })
  },

但是页面的数据不显示，具体原因不详，应该是this.data.方法设置数据，应该和页面的生命周期有关，在数据设置时，页面已渲染,（自己想想的，不知道对不对）

这是我们就可以通过中介，将数据拼接好了之后，再通过this.setData()方法设置数据，这时就可以正常显示

newsrequest:function(page){
    var _this=this;
    // console.log(_this.data.page)
    requstFfunc.requestData('https://xxxx/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++;
      }
    })
  },

上述方案虽然成功了实现了数据追加，但是。。。且看下边代码

    var arr1 = [1,2,3,4];//原来的数据
    var arr2 = [5,6,7,8];//后来的数据
    var arr3 = arr2.concat(arr1);//[5,6,7,8,1,2,3,4];
    
    //但是我们想要的应该是
    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/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++;
      }
    })
  },

本文转自：https://cloud.tencent.com/developer/article/1349925