下拉更新效果:
上拉加载更多效果:
这里我使用的是模拟数据,如果要请求后台接口,可以在请求的回调函数中进行数据的对接。
xxx.json
如果你允许全部页面都可以下拉,就在app.json文件里配置如下内容,否则,可以在单个页面的json里设置。
{
"enablePullDownRefresh": true,
"navigationBarTitleText": "测试加载"
}
xxx.wxml
写一些页面内容,这里我循环渲染一系列图片,分为3种状态:原状态、下拉更新时、上拉加载更多时,每种状态改变时,图片会更换为另一系列,方便观察。
<view wx:for='{{imgUrl}}'>
<image src='{{item}}' style='width:100%;margin-bottom:20rpx;'></image>
</view>
xxx.js
Page({
/**
* 页面的初始数据
*/
data: {
imgUrl: [
'../img/banner.png',
'../img/banner.png',
'../img/banner.png',
'../img/banner.png'
],
moreImg: [
'../img/banner2.png',
'../img/banner2.png',
'../img/banner2.png',
'../img/banner2.png'
]
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
// 显示顶部刷新图标
wx.showNavigationBarLoading();
var that = this;
//下拉更新时,把原图片更换成这些图片
that.data.imgUrl = ['../img/banner1.png', '../img/banner1.png', '../img/banner1.png', '../img/banner1.png'];
that.setData({
imgUrl: that.data.imgUrl
});
//完成
setTimeout(function() {
wx.hideNavigationBarLoading() //完成停止加载
wx.stopPullDownRefresh() //停止下拉刷新
}, 1500);
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
var that = this;
// 显示加载图标
wx.showLoading({
title: '玩命加载中',
});
//上拉加载更多时,往原图片里增加图片
for (var i = 0; i < that.data.moreImg.length; i++) {
that.data.imgUrl.push(that.data.moreImg[i]);
}
that.setData({
imgUrl: that.data.imgUrl
});
//完成
setTimeout(function () {
wx.hideLoading();
}, 1000);
}
})