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": "正在刷新自定義文本"
}
}
}
}
}