幽灵资源网 Design By www.bzswh.com
微信小程序 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"
}
wxml文件代码：
<view class="container">
<scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;"
class="list" bindscrolltolower="bindDownLoad" bindscroll="scroll" bindscrolltoupper="refresh">
<view class="item" wx:for="{{list}}">
<image class="img" src="/UploadFiles/2021-04-02/zhongtong.png">
wxss文件代码
.container{
height: 100%;
padding: 20rpx;
}
.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;
}
注意，
http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action这个接口就是更具传入的页数，每次返回不同数据。
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
幽灵资源网 Design By www.bzswh.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。