|
如图,微信小程序实现上拉加载，下拉刷新。代码如下
js文件代码
-
// pages/loading/loading.js
-
var p = 1
-
var url = "http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action";
-
var GetList = function (that) {
-
that.setData({
-
hidden: false
-
});
-
wx.request({
-
url: url,
-
data: {
-
pageSize: 10,
-
pageNo: p
-
},
-
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
-
});
-
p++;
-
that.setData({
-
hidden: true
-
});
-
}
-
});
-
}
-
Page({
-
data: {
-
list: []
-
},
-
onLoad: function (options) {
-
// 页面初始化 options为页面跳转所带来的参数
-
var that = this
-
GetList(that)
-
},
-
onPullDownRefresh: function () {
-
//下拉
-
console.log("下拉");
-
p = 1;
-
this.setData({
-
list: [],
-
});
-
var that = this
-
GetList(that)
-
},
-
onReachBottom: function () {
-
//上拉
-
console.log("上拉")
-
var that = this
-
GetList(that)
-
}
-
})
复制代码
json文件代码
-
{
-
"enablePullDownRefresh": true,
-
"backgroundTextStyle": "dark"
-
}
wxml文件代码
-
<view class="item" wx:for="{{list}}" wx:for-item="item" for:key="item.carrierId">
-
<image class="img" src="https://cdn.kuaidi100.com/images/all/56/zhongtong.png"></image>
-
<text calss="txt" >{{item.carrierName}}</text>
-
<text class="txt">{{item.carrierId}}</text>
-
</view>
wxss文件代码
-
.img{
-
border-radius: 50%;
-
height: 100rpx;
-
width: 100rpx;
-
}
-
.txt{
-
margin: 10rpx 10rps 10rpx 10rpx;
-
font-family: "微软雅黑";
-
font-size: 50rpx;
-
height: 50rpx;
-
}
说明：这个接口返回的就是 分页的数据，根据传入的参数，每次返回不同的数据
-
http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action
复制代码
其中有网友提问：怎么实现下拉,上面三个点的动画？
解决办法：josn中添加 "enablePullDownRefresh": true,
"backgroundTextStyle": "dark" |
