微信小程序之上拉刷新下拉加载

685 阅读2分钟

Hello 大家好啊,最近换完工作之后一时间在熟悉公司的代码!没有更新小程序共享内容,又赶上双十一活动,比较忙就没空更新了,今天终于闲下来了!今天和大家分享下拉刷新,上拉加载的代码!


1、首先我们分析一下后台给的数据结构,不要着急着去写代码,分析出思路后再出发!

   上图我们可以看到,后台给的数据节后是一个对象里面二部分,一部分是数据列表,另一部分是分页内容。all_count数据数量,all_page 数据页数,current_page当前数据页码,page_size 每页数据展示多少条。 list数据是数据的集合。

2、我们可以自定义一个函数:获取到后台返给我们的参数,我们只取自己需要的参数。获取到当前页面的数据量比较总数据量,如果小于则弹窗加载完成,如果大于则弹窗正在加载,请稍后,然后调用数据接口。

  loadMore: function () {
        var that = this;
        var pagesize = that.data.size;
        var all_count = that.data.all_count;
       if (pagesize>=all_count){
            wx.showToast({
               title: '数据加载完成',
              duration:500,
              icon:'none'
             })
        } else if (pagesize<all_count){
           var size = pagesize + 6
           that.setData({ size: size })
           var data = { 参数}
           http.httpGet('接口', data, function (res) {
                             success: {
                              that.setData({
                                   "projectList": res.data.list,
                                   "projectPage": res.data.page,
                                  "page_size": res.data.page.page_size
                              })
                         }
                     })
          }
     },

微信小程序页面自带触底事件,在这个里面调用你的自定义函数。

onReachBottom: function () {
      this.loadMore();
   },


好了今天就分享到这里了有空我再分享其他二种方法!如果对你有用,赞一下吧