uniapp 開發app 開啟頁面的下拉刷新無效


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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM