微信小程序下拉分页源码
大家都知道，微信小程序上拉就是实现加载，下拉就是实现刷新，那么微信小程序下拉分页要怎么弄呢?具体操作所需要的代码是什么?看看以下资料。
js文件代码
[javascript] view plain copy print?
// pages/loading/loading.js
var p = 1
var url = "192.168.30.4:8080/gtxcx/carrier/getCarrier.action";
var GetList = function (that) {
that.setData({
hidden: false
});
wx.request({
url: url,
data: {
pageSize: 10,
pageNo: p
},
success: function (res) {
var l = that.data.list
for (var i = 0; i < res.data.length; i++) {
l.push(res.data[i])
}
that.setData({
list: l
});
p++;
that.setData({
hidden: true
});
}
});
}
Page({
data: {
list: []
},
onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
var that = this
GetList(that)
},
onPullDownRefresh: function () {
//下拉
console.log("下拉");
p = 1;
this.setData({
list: [],
});
var that = this
GetList(that)
},
onReachBottom: function () {
//上拉
console.log("上拉")
var that = this
GetList(that)
}
})
// pages/loading/loading.js
var p = 1
var url = "192.168.30.4:8080/gtxcx/carrier/getCarrier.action";
var GetList = function (that) {
that.setData({
hidden: false
});
wx.request({
url: url,
data: {
pageSize: 10,
pageNo: p
},
success: function (res) {
var l = that.data.list
for (var i = 0; i < res.data.length; i++) {
l.push(res.data[i])
}
that.setData({
list: l
});
p++;
that.setData({
hidden: true
});
}
});
}
Page({
data: {
list: []
},
onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
var that = this
GetList(that)
},
onPullDownRefresh: function () {
//下拉
console.log("下拉");
p = 1;
this.setData({
list: [],
});
var that = this
GetList(that)
},
onReachBottom: function () {
//上拉
console.log("上拉")
var that = this
GetList(that)
}
})
json文件代码
[javascript] view plain copy print?
{
"enablePullDownRefresh": true,
"backgroundTextStyle": "dark"
}
{
"enablePullDownRefresh": true,
"backgroundTextStyle": "dark"
}
wxml文件代码
[html] view plain copy print?
{{item.carrierName}}
{{item.carrierId}}
{{item.carrierName}}
{{item.carrierId}}
wxss文件代码
[css] view plain copy print?
.img{
border-radius: 50%;
height: 100rpx;
width: 100rpx;
}
.txt{
margin: 10rpx 10rps 10rpx 10rpx;
font-family: "微软雅黑";
font-size: 50rpx;
height: 50rpx;
}
.img{
border-radius: 50%;
height: 100rpx;
width: 100rpx;
}
.txt{
margin: 10rpx 10rps 10rpx 10rpx;
font-family: "微软雅黑";
font-size: 50rpx;
height: 50rpx;
}
说明：这个接口返回的就是 分页的数据，根据传入的参数，每次返回不同的数据
以上就是实现微信小程序下拉分页和上拉加载所需要的开发小程序源码了，对照这个代码，你就可以进行开发，让小程序下拉分页功能实现。想要获取更多资料请关注微信小程序素材网。
微信小程序分页效果，小程序分页滑动效果怎么弄
如何实现小程序下拉框组件编辑?
微信小程序下拉框开发代码