当一个列单的记录有多条时,我们需要上拉自动加载下面的内容,当我们添加记录后,有时候页面会反应不过来,这时候就用到我们的下拉刷新了,下面讲解一下自动加载和刷新。。。。
第一步:我们在列表页的js代码中写一个公共方法来进行控制加载和刷新(类在page外面写)我用的方法为loadmore(方法可以起任意名)
var page = 1; var isfinish = false;//加载完毕 function loadmore(that) { if (isfinish) return; wx.showLoading({ title: '正在加载', }) wx.request({ url: 'http://www.litao1314.top/server/index.php/home/index/index', data: { page: page, // condition:that.data.condition }, success: (res) => { console.log(res); wx.hideLoading(); if (res.data.length > 0) { var list = that.data.list; // console.log(list); for (var i = 0; i < res.data.length; i++) { list.push(res.data[i]); } that.setData({ list: list }); page++; } else { isfinish = true; } wx.stopPullDownRefresh(); } }) }第二步:在json文件中定义下拉(第一个必选,下面两个任选)
"enablePullDownRefresh":true, "onReachBottomDistance":true, "navigationBarTitleText":"动态"第三步:在js中的 onPullDownRefresh(下拉刷新), onReachBottom(上拉加载)方法中引用上面的公共函数
//下拉刷新 onPullDownRefresh: function () { console.log("下拉刷新"); // wx.showNavigationBarLoading() //在标题栏中显示加载 page = 1; isfinish = false; this.setData({ list: [] }); loadmore(this); },
onReachBottom: function () { console.log('上拉加载') var that = this; loadmore(that); },这样就基本完成了,当然别忘了对页面要进行分页显示哦!!!!!!