微信小程序scroll-view不能实现下拉刷新

一般在列表展示页面,会使用到上拉加载和下拉刷新功能,在scroll-view中有bindscrolltolower事件,可以实现上拉加载功能,但是却没法实现下拉刷新。

如需同时使用两种功能,解决步骤如下(以list页面为例):

1. 将scroll-view 改成普通的view, 并且设置样式

// list.wxss
page {
height: %;
} .container {
width: %;
height: %; // 或者 height: 100vh;
} // 其他样式略

2. 在根配置文件json或者当前页面的json文件设置 (建议在当前页面配置,因为其他页面并非一定需要下拉刷新功能)

 // list.json

 {
"enablePullDownRefresh": true
}

3. 在逻辑文件 js中添加功能

onReachBottom() {
// 上拉加载逻辑
} onPullDownRefresh() {
// 下载刷新逻辑
// wx.showLoading 或者 wx.showNavigationBarLoading() 作为交互提示
}
上一篇:微信小程序(2)--下拉刷新和上拉加载更多


下一篇:微信小程序 禁止ios页面下拉下滑滚动 出现空白的情况