• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

小程序实现简单分页功能(下拉加载更多)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

1、先建一个List页面

 

 

 

 

2、在json文件里写好小程序的分页配置

{
  "navigationBarTitleText": "管理记录",
  "enablePullDownRefresh": true,
  "enableReachBottom": true,
  "usingComponents": {}
}

如图:

 

 

 

3、TestList.wxml页面写页面内容,如下:

<!--pages/timecard/overwork/Testlist/Testlist.wxml-->
<view class="main">
  <view class="div_center">

    <view wx:for="{{list}}" hidden="{{box2_hidden}}" style=" background-color:white;">

        <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell">
                <view class="weui-cell__bd" >
                  <checkbox>{{item.staff_name}}</checkbox>
                </view>
                <view class="weui-cell__ft">{{item.dept_name}}</view>
            </view>
        </view>
        </view>
  </view>


</view>

 

4、最后js文件代码:三个地方撸代码:1、data里初始化变量,2、写一个获取数据的方法,3、分别在下拉,上拉监听函数里加载获取数据的方法

  41、data里面变量初始化:

/**
   * 页面的初始数据
   */
  data: {

      list: [],   //会员列表
      total: 0,    //分页总数
      page: 1,    //分页记录数
      pagesize: 10,   //分页大小
     onRefresh: true,



  },

 

  4.2、写一个方法,去后台取到list分页数据:我写的是getList方法

/**
   * 请求后台获取数据
   */ 
  getList: function () {
    var that=this;

    var onRefresh = that.data.onRefresh;//false为重新刷新数据,true为分页累加数据


    //请求后台数据
    var usr = wx.getStorageSync(\'xxx\');//url请求地址前缀,自己的后台
    wx.request({
      url: app.globalData.im_host + \'/im_app/queryPersonList.action\',
      data: {
        \'login_user\': usr,
        \'page\': that.data.page,
        \'pagesize\': that.data.pagesize,
      },
      method: \'get\',
      success: function (res) {
        var datas = res.data.data;
        // console.log(12233);
        // console.log(datas);
        
        if(datas != null && datas.staff_list.length > 0){
          if(onRefresh){//false为重新刷新数据,true为分页累加数据
            that.setData({
              // total: 5,
              list: that.data.list.concat(datas.staff_list), //累加list,
              page: that.data.page + 1
            });
          }else{
            that.setData({
              // total: 5,
              list: datas.staff_list, //重新覆盖list,
              page: that.data.page + 1
            });
          }
          
        }else{
          wx.showToast({
            title:\'没有更多数据了\',
            icon:\'none\'
          })
          that.setData({
              isloading:true
          })

          }
      },
      complete : function(res){
        wx.hideLoading();
      },
      fail: function (res) {
        console.log(\'load fail\');
        
      }
    })


    
  },
  

 

  4.3、别忘了在生命周期函数onLoad,加载此getList()方法

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getList();
  },

 

  4.4、最后分别在生命周期函数onPullDownRefresh,监听用户下拉动作和生命周期onReachBottom,加载获取数据的方法getList(),如下:

/**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    console.log(\'fresh\')

    var that = this;
    that.setData({
      page:1,
      pagesize:10,
      onRefresh: false //重新加载数据
    });
  //调用刷新时将执行的方法
    //0.5s加载显示,如果不加会一直显示加载中,造成不好的用户体验
    // var that = this
    wx.showNavigationBarLoading() //在标题栏中显示加载
    setTimeout(function() {
      wx.showLoading({
        title: \'加载中\',//加载转圈显示
      });
      that.getList();
      wx.hideNavigationBarLoading() //完成停止加载
      wx.stopPullDownRefresh() //停止下拉刷新
    }, 500);
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log(\'bottom\');

    
    wx.showLoading({
      title: \'加载中\',//加载转圈显示
    });
    
    var that = this;
      that.setData({
        onRefresh: true //累加数据
    });
    this.getList();
  },

 

5、上效果图:上滑,下拉都会触发请求到后台,拿到分页数据(懒得做动态图了,将就看吧)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

。。。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序的四种跳转方式和怎么传值的发布时间:2022-07-18
下一篇:
小程序下拉列表框菜单发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap