作者:佩刚坤斌冠如_567 | 来源:互联网 | 2022-10-12 16:22
微信小程序 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
json文件代码
{
"navigationBarTitleText": "下拉刷新",
"enablePullDownRefresh": true,
"backgroundTextStyle": "dark"
}
wxml文件代码:
{{item.carrierName}}
{{item.carrierTelphone}}
{{item.carrierId}}
加载中...
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这个接口就是更具传入的页数,每次返回不同数据。
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!