当一个列单的记录有多条时,我们需要上拉自动加载下面的内容,当我们添加记录后,有时候页面会反应不过来,这时候就用到我们的下拉刷新了,下面讲解一下自动加载和刷新。。。。
第一步:我们在列表页的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);
},
这样就基本完成了,当然别忘了对页面要进行分页显示哦!!!!!!