微信小程序 scroll-view实现上拉加载与下拉刷新的实例
作者:lqh 时间:2024-04-23 09:30:40
微信小程序 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="https://cdn.kuaidi100.com/images/all/56/zhongtong.png"></image>
<view class="text">
<text class="title">{{item.carrierName}}</text>
<text class="description">{{item.carrierTelphone}}</text>
<text class="description">{{item.carrierId}}</text>
</view>
</view>
</scroll-view>
<view class="body-view">
<loading hidden="{{hidden}}" bindchange="loadingChange">
加载中...
</loading>
</view>
</view>
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这个接口就是更具传入的页数,每次返回不同数据。
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
来源:http://blog.csdn.net/u011072139/article/details/53940859
标签:微信小程序,scroll-view上拉加载,下拉刷新


猜你喜欢
用CSS设置表格Table的细边框的比较好用的方法
2010-09-06 14:58:00
关于SQL Server数据库中转储设备分析
2009-01-21 14:55:00
webpack构建的详细流程探底
2024-04-10 10:38:39
Python中逗号的三种作用实例分析
2021-12-24 23:52:33
layui table 获取分页 limit的方法
2023-08-24 13:44:56

推荐个辅助软件FastStone Capture
2008-12-23 13:23:00

Go语言中sync.Cond使用详解
2024-04-25 15:28:23
python解决循环依赖的问题分析
2023-03-19 12:22:14
python使用sklearn实现决策树的方法示例
2023-03-25 07:44:28

正则表达式30分钟入门教程
2007-08-27 10:38:00

解决pip install 卡住不动的问题
2021-06-16 16:25:13
sql2008 还原数据库解决方案
2024-01-26 07:16:59
Windows下MySQL 5.7无法启动的解决方法
2024-01-26 02:32:31

对django layer弹窗组件的使用详解
2021-09-08 00:09:38
first-letter的一个小妙用
2010-03-20 21:47:00

Python3.6 之后字典是有序的?
2021-02-14 08:27:53

通过启动脚本来感受ASP的力量
2008-11-07 15:25:00
Python设计密码强度校验程序
2022-09-29 08:37:12

如何自己制作验证码的head.fix和body.fix文件
2009-06-01 12:50:00
python多重继承新算法C3介绍
2022-05-28 12:27:04