微信小程序开发:列表页加载下一页及下拉刷新实现方法
微信小程序开发中列表页加载下一页以及下拉刷新 实现方法,微信列表页常用功能有下拉刷新,上划加载更多,怎么实现呢?
直接上代码吧:
列表页js
global.p = 1
var url = getApp().globalData.API_URL +'/api/index.php?m=jk&c=newslist';
var GetList = function (that) {
//console.log(global.p)
that.setData({
hidden: false,
});
wx.request({
url: url,
data: {
pageSize: 10,
pageNo: global.p
},
success: function (res) {
function toDate(number) {
var n = number * 1000;
var date = new Date(n);
var Y = date.getFullYear() + '/';
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
return (Y + M + D)
}
var l = that.data.list
for (var i = 0; i < res.data.length; i++) {
res.data[i].pubdate = toDate(res.data[i].pubdate),
l.push(res.data[i])
}
//console.log(l)
that.setData({
list : l
});
global.p++;
//console.log(global.p)
wx.stopPullDownRefresh();
that.setData({
hidden: true
});
}
});
}
Page({
data: {
list: [],
},
onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
var that = this
GetList(that)
wx.request({
url: getApp().globalData.API_URL +'/api/index.php?m=jk&c=nlmlist',
success:function(res){
that.setData({
nlmlist:res.data
})
}
})
},
onPullDownRefresh: function () {
//下拉
console.log("下拉");
global.p = 1;
this.setData({
list: [],
});
var that = this
GetList(that)
},
onReachBottom: function () {
//上拉
console.log("上拉")
var that = this
GetList(that)
}
})