專案做到中期遇到一個問題,華為手機有些頁面顯示不全且無法下滑。
因為之前一直用的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