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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏java一日一条

为什么你应该学习编程

很多人,从HR专业人员到市场营销专业人员,都在硅谷工作,但硅谷对编程专业人士的需求更多,也更重视这个行业。大多数人往往更偏爱一个收入更高的工作。

8930
来自专栏java一日一条

为什么跳槽加薪会比内部调薪要高?

之后的若干年加薪都是遵循企业内部晋升通道,如果企业加薪幅度赶不上同岗位市场薪酬回报的上涨幅度,就会出现题主所说的现象。

8310
来自专栏java一日一条

IT 已成为最疯狂的加班行业,没有之一

夜幕降临,当IT大楼里依然灯火通明时,那一刻,我仿佛王进喜、石传翔等劳模灵魂附体,我知道我不是一个在加班,我不是一个人!连续9个通宵加班都不是事,一点不夸张,这...

12420
来自专栏java一日一条

程序员的走与留?

初级开发人员在他们的职业生涯早期必须考虑的一个大问题就是,他是该离开还是留下。我在我职业生涯的早期发现,相对于我的同事我所得的报酬过低,而这仅仅是因为他们工作的...

7220
来自专栏葡萄城控件技术团队

生产制造MES系统中,如何应用报表分析?

中国制造业产业结构逐步从低附加值传统加工制造业和资源密集型制造业向高附加值新型制造业转型升级。生产制造类企业为了监控项目进度和产品生产情况,会需要制作大量的报表...

34530
来自专栏理论坞

破窗效应

8520
来自专栏理论坞

鸟笼逻辑

6730
来自专栏java一日一条

程序员的走与留?

初级开发人员在他们的职业生涯早期必须考虑的一个大问题就是,他是该离开还是留下。我在我职业生涯的早期发现,相对于我的同事我所得的报酬过低,而这仅仅是因为他们工作的...

7020
来自专栏养码场

面试想拿 25K,HR 却说只值 15K,技术人该如何反驳?

知乎上看到这样一个问题:面试的时候想拿xx,HR却说我只值xx,这种情况下应该怎么办?

21420
来自专栏Grace development

“生于忧患,死于安乐”之程序员人生

没错,大多人的经历都是如此!这样艰苦的奋斗,不断的努力,使我们在这个行业立足。正是这份兴趣、这份毅力、这份坚持支撑着我们,才让我们走到了现在。

7410

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励