摘要：
如果您只想在应用程序上启用下拉刷新，请不要配置页面的enablePullDownRefresh属性，而是将pullToRefresh-˃support配置为true。启用本机下拉刷新时，页面中不应使用全屏高滚动视图。当内容被向下拖动时，将优先触发下拉刷新，而不是滚动视图滚动。本机下拉刷新的起始位置位于本机导航栏下方。如果取消本机导航栏并使用自定义导航栏，则本机下拉刷新的位置将位于屏幕顶部。hellouniapp的扩展组件中有一些示例。如果你想在应用端实现更复杂的下拉刷新，比如美团和京东app，你可以使用nvue的组件。
pages.json最初配置(最终game over)
{
"path": "pages/login/index",
"style": {
"navigationBarTitleText": "登录",
"enablePullDownRefresh": true
}
}
//全局部分
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "跑步吧",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"app-plus": {
// 将回弹属性关掉
"bounce": "none"
}
},
解决方式(这是我自己的解决办法不知道是否适用于大家)
- page.json (单独设置app端开启下拉刷新)
- 参考文档,找到下拉刷新的说明部分
- 下拉刷新使用注意
- enablePullDownRefresh 与 pullToRefresh->support 同时设置时，后者优先级较高。
- 如果期望在 App 和小程序上均开启下拉刷新的话，请配置页面的 enablePullDownRefresh 属性为 true。
- 若仅期望在 App 上开启下拉刷新，则不要配置页面的 enablePullDownRefresh 属性，而是配置 pullToRefresh->support 为 true。
- 开启原生下拉刷新时，页面里不应该使用全屏高的scroll-view，向下拖动内容时，会优先触发下拉刷新而不是scroll-view滚动
- 原生下拉刷新的起始位置在原生导航栏的下方，如果取消原生导航栏，使用自定义导航栏，原生下拉刷新的位置会在屏幕顶部。如果希望在自定义导航栏下方拉动，只能使用circle方式的下拉刷新，并设置offset参数，将circle圈的起始位置调整到自定义导航下方。hello uni-app的扩展组件中有示例。
- 如果想在app端实现更多复杂的下拉刷新，比如美团、京东App那种拉下一个特殊图形，可以使用nvue的组件。HBuilderX 2.0.3+起，新建项目选择新闻模板可以体验
- 如果想在vue页面通过web前端技术实现下拉刷新，插件市场有例子，但前端下拉刷新的性能不如原生，复杂长列表会很卡
- iOS上，default模式的下拉刷新和bounce回弹是绑定的，如果设置了bounce:none，会导致无法使用default下拉刷新
成功开启之后,重新配置
"enablePullDownRefresh": true,结果也是成功开启了下拉刷新
{
"path": "pages/index/index", //首页
"style": {
"app-plus": {
"pullToRefresh": {
"support": true,
"color": "#ff3333",
"style": "default",
"contentdown": {
"caption": "下拉可刷新自定义文本"
},
"contentover": {
"caption": "释放可刷新自定义文本"
},
"contentrefresh": {
"caption": "正在刷新自定义文本"
}
}
}
}
}