微信小程序 scroll-view实现上拉加载与下拉刷新的实例

前端之家收集整理的这篇文章主要介绍了微信小程序 scroll-view实现上拉加载与下拉刷新的实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

微信小程序 scroll-view实现上拉加载与下拉刷新的实例

实现效果图:

如图,使用小程序的scroll-view实现的上拉加载数据,下拉刷新数据,试下代码如下:

js文件代码

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文件代码

wxml文件代码

@H_301_25@ @H_301_25@

wxss文件代码

.item{
display: flex;
margin-bottom: 50rpx;
width:100%;
background:#f0f0f0;
overflow:hidden;
}

.img{
height: 100rpx;
width: 100rpx;
border-radius: 50%;
}

.text{
display: flex;
flex-shrink:1;
flex-grow:1;
padding: 10rpx;
flex-wrap: wrap;
font-size: 50rpx;
}

.title{
font-size: 50rpx;
margin:10rpx 100rpx 10rpx 100rpx;
}
.description{
font-size: 50rpx;
align-self:flex-end;
}

注意,

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持

原文链接:https://www.f2er.com/weapp/42252.html

猜你在找的微信小程序相关文章