mui 頁面無法下滑拖拽 主要體現在華為手機瀏覽器

六界神話發表於2018-04-04

 

專案做到中期遇到一個問題,華為手機有些頁面顯示不全且無法下滑。

因為之前一直用的Google瀏覽器的模擬模式進行開發和除錯的,一直未發現這個問題。

 

剛開始 選用mui的下拉重新整理上拉載入的方式來進行頁面配置。

忙活半天總算是把android的問題給解決了。然後轉頭去os上看看。果然ios又出問題了。

因為頭部用的是原生的頭部,下面主體內容又都用mui的mui-scroll-wrapper樣式栝主了,

所以使用的時候反應遲鈍、不流暢,根據無法正常使用。

 

接著又有傳統方式寫html發現在瀏覽器上是沒有問題。問題原因浮現了。

然後我把相關的js和css全部加進來發現,果然不好使了。

 

經過排查原因找到了

原來是因為 mui.min.css 中設定了 touch-action: none;只需要把它刪掉就好了

但因為下拉重新整理上拉載入還需要這個屬性。

所以我是直接把mui.min.css檔案複製 一份,改個新的名稱。

在不需要使用下拉重新整理的頁面引用這個新的mui樣式就可以了。

 

如果嫌麻煩,則在不需要使用“下拉重新整理” 的html頁面,加上  * { touch-action:inherit; }

就可以解決問題了。

 

 本部落格是本人原創 未經允許不得轉載 謝謝。

  連結地址:http://www.cnblogs.com/richard-ju/p/L2018004.html

相關文章