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

2023-11-14 10:24:58

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

如需同时使用两种功能，解决步骤如下（以list页面为例）：

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

// list.wxss
page {
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;  // 或者 height: 100vh;
}

// 其他样式略

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

1 // list.json
2 
3 {
4   "enablePullDownRefresh": true
5 }

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

onReachBottom() {
  // 上拉加载逻辑
}

onPullDownRefresh() {
  // 下载刷新逻辑
  // wx.showLoading 或者 wx.showNavigationBarLoading() 作为交互提示
}

码农公寓