小程序提供了这个事件。
onPullDownRefresh()
监听用户下拉刷新事件。
如果要开启下拉刷新功能,要先到json配置:
"enablePullDownRefresh":true
配置后下拉有反应了但是没有加载效果,在onPullDownRefresh()事件介绍那里没有提到,在全局配置那里提到。
backgroundTextStyle
在json内加
"backgroundTextStyle": "dark"
下拉就有加载效果了。
现在做一个例子。
直接在js的Page上面定义一个数据当外部数据。
var mydata=[
{name:'苹果'},
{ name: '香蕉' },
{ name: '菠萝' },
{ name: '雪梨' },
{ name: '葡萄' },
{ name: '荔枝' },
{ name: '芒果' },
{ name: '哈密瓜' },
{ name: '西瓜' },
{ name: '橙子' },
]
Page的data里面;
data: {
fruits: [],
},
在onload里面选取5个数据,即是页面显示5个数据。到时下拉再显示剩下的数据。
let f = []
for (let i = 0; i < 5; i++){
f[i]= mydata[i].name
}
this.setData({
fruits:f,
})
在wxml页面里,支持for循环。
<view wx:for='{{fruits}}' wx:key='index' class="fruit">
{{item}}
</view>
wxss定义一下显示样式,加边框字体框内居中;
.fruit{
display: flex;
margin: 10rpx;
padding:10rpx 10rpx;
align-content: center;
justify-content: center;
width: 150rpx;
border: 1px solid #000
}
保存如图;
现在到xx.js找到
onPullDownRefresh事件
在里面写上下拉刷新显示剩下的数据。取到剩下的数据加到原数据上。
let f = []
let d=0
for (let i = 5; i < mydata.length; i++) {
f[d] = mydata[i].name
d++
}
this.setData({
fruits: this.data.fruits.concat(f),
})
这样一点下拉就将剩下的数据显示出来了,但是没有开始加载效果,和结束加载效果(在模拟器可能看不到明显效果,用手机测试效果就明显了)。加上如下代码。
wx.showNavigationBarLoading()//开始加载效果
wx.hideNavigationBarLoading()//完成停止加载
wx.stopPullDownRefresh() //停止下拉刷新
onPullDownRefresh内完整代码;
wx.showNavigationBarLoading();
let f = []
let d=0
for (let i = 5; i < mydata.length; i++) {
f[d] = mydata[i].name
d++
}
this.setData({
fruits: this.data.fruits.concat(f),
})
wx.hideNavigationBarLoading()//完成停止加载
wx.stopPullDownRefresh() //停止下拉刷新
如图;
这样完成了下拉刷新加载效果。
最近了解了一下微信小程序开发,能力有限,顺便做了个简易画板小程序