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、上效果图:上滑,下拉都会触发请求到后台,拿到分页数据(懒得做动态图了,将就看吧)
。。。
请发表评论