微信小程序 scroll-view完成上拉加载与下拉刷新的案例
微信小程序，简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。小程序是一种不用下载就能使用的应用，也是一项门槛非常高的创新，经过将近两年的发展，已经构造了新的小程序开发环境和开发者生态。
这篇文章主要介绍了微信小程序 scroll-view实现上拉加载与下拉刷新的实例的相关资料,需要的朋友可以参考下微信小程序 scroll-view实现上拉加载与下拉刷新的实例
实现效果图：
如图，使用小程序的scroll-view实现的上拉加载数据，下拉刷新数据，试下代码如下：
js文件代码：
var url = "http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action";
var page = 1;
var GetList = function (that) {
that.setData({
hidden: false
});
wx.request({
url: url,
data: {
pageSize: 10,
pageNo: page
},
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
});
page++;
that.setData({
hidden: true
});
}
});
}
Page({
data: {
hidden: true,
list: [],
scrollTop: 0,
scrollHeight: 0
},
onLoad: function () {
var that = this;
wx.getSystemInfo({
success: function (res) {
console.info(res.windowHeight);
that.setData({
scrollHeight: res.windowHeight
});
}
});
},
onShow: function () {
var that = this;
GetList(that);
},
bindDownLoad: function () {
var that = this;
GetList(that);
},
scroll: function (event) {
this.setData({
scrollTop: event.detail.scrollTop
});
},
refresh: function (event) {
page = 1;
this.setData({
list: [],
scrollTop: 0
});
GetList(this)
},
onPullDownRefresh: function () {
console.log("下拉")
},
onReachBottom: function () {
console.log("上拉");
}
})json文件代码
{
"navigationBarTitleText": "下拉刷新",
"enablePullDownRefresh": true,
"backgroundTextStyle": "dark"
}