武汉互赢网络科技股份有限公司

为企业创品牌·从营销型网站建设开始·互赢懂技术·更懂品牌营销

24小时热线

159 7210 9576027-89992189

您的位置:首页 > 新闻资讯 > 行业百科 > 技术百科

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

作者:龙 时间:2018-08-09 浏览:

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.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)
        });
        _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.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++;
      }
    })
  },

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

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

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++;
      }
    })
  },

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

    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.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++;
      }
    })
  },
 

最新动态

常见问题百宝箱

全国服务热线

027-89992189

扫一扫关注微信

Copyright 2013-2020 All Rights Reserved 武汉互赢网络科技股份有限公司 版权所有 武汉网站制作

获取品牌营销方案

快速填写

马上获取

互联网低成本创名牌从此开始!