微信小程序 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"
}

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