微信小程式開發中列表頁載入下一頁以及下拉重新整理 實現方法
微信小程式開發中列表頁載入下一頁以及下拉重新整理 實現方法,微信列表頁常用功能有下拉重新整理,上劃載入更多,怎麼實現呢?
直接上程式碼吧:
列表頁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)
}
})
<div 0px"="" style="padding: 0px; list-style-type: none; margin: 10px; color: rgb(89, 104, 120); background-color: rgb(252, 253, 253);">微信小程式開發中列表頁載入下一頁以及下拉重新整理 實現方法