Fork me on GitHub

[小程序]-下拉刷新

微信小程数据下拉刷新设置

step1

在json文件中配置enablePullDownRefresh为true(app.json中在window中设置enablePullDownRefresh,此效果作用于全局),下面两种设置方法只写一个就行了

1
2
3
4
5
6
app.json
{
"window": {
"enablePullDownRefresh":true
},
}
1
2
3
4
page.json
{
"enablePullDownRefresh": true
}

step2

在js文件中实现onPullDownRefresh方法,在网络请求完成后调用wx.stopPullDownRefresh()来结束下拉刷新

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
page.js
Page({
onPullDownRefresh: function(){
wx.request({
url: '',
data: {},
method: 'GET',
success: function (res) {},
fail: function (res) {},
complete: function (res) {
wx.stopPullDownRefresh();
}
})
}
})

End & Bug处理

在使用时遇到了一个bug,下拉时的三个圆点没有显示。分析之后发现是因为圆点的颜色与背景色一样,影响了显示

1
2
3
4
5
6
app.json
{
"window": {
"backgroundTextStyle": "dark"
},
}

1
2
3
4
pags.json
{
"backgroundTextStyle": "dark"
}
支持作者