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

Posted 骑着小毛驴过冬的八阿哥

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序scroll-view不能实现下拉刷新相关的知识,希望对你有一定的参考价值。

一般在列表展示页面,会使用到上拉加载和下拉刷新功能,在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() 作为交互提示
}

 


以上是关于微信小程序scroll-view不能实现下拉刷新的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序使用scroll-view自定义下拉刷新

微信小程序下拉刷新上拉加载

微信小程序下拉刷新上拉加载

微信小程序下拉加载与上拉刷新

[wx]微信小程序自定义下拉刷新

微信小程序如何下拉刷新上拉无限推送。