佛說“事物都有其兩面性”,媽蛋用個破插件還能感悟出哲理。
? ? 前一天你還感慨iscroll大法好,等到今天你真正看透了這小子的真實面目,卻噼里啪啦的問候創造人家小可愛的母親害你加班,害你沒時間玩王者榮耀,害你不能跟姑娘約會。
? ? 說了堆沒用的,整點技術性的吧。說到iscroll首先要了解它滾動的原理是什么,看一下剛剛畫的這個極簡的圖。
原理:外層盒子outBox設置,height:100%;width:100%;position:relative;
? ? ? ? ? 內層盒子innerBox設置,width:100%;position:absolute;讓內容自然撐開盒子高度。
? ? ? ? ? 于是乎大家就能看出來了,Iscroll其實就是控制內層盒子的滾動來實現頁面的滾動效果。
也就是說iscroll其實是自己模擬了瀏覽器的滾動效果,并不是利用手機自帶瀏覽器的滾動,‘永遠被模仿,無法被超越’用在自帶瀏覽器上也不足為奇吧,你用橘黃色的鮮艷花朵想一下你個小團隊自己做個模擬滾動效果,怎么可能會沒有問題呢,兼容性怎么可能沒有缺陷呢,效果怎么可能有瀏覽器自帶滾動好呢。單純的狗狗
? ? ?描述一下遇到的問題吧
? ? ? ? ?Question1:當你來了一個需求說讓你在webview中添加一個長按的方法,這個webview偏偏還必須要引入iscroll,這時候你會發現一些奇怪的小問題,從new一個iscroll開始。代碼是這樣擼的、
? ?可能有點繞仔細看一下接下來說的內容:其實問題就出在preventDefault里面,如果把它設置為true則安卓無法監聽到自定義的長按事件,ios倒是可以,兩者滾動起來還都流暢;若設置為false,則兩者均可監聽到自定義的長按事件,然而這時候ios的滾動卻出現了卡卡卡,不流暢的問題,兼職神煩,這不相互矛盾嗎,你說似不似。然后我就可勁的找辦法,究其原因,窺探其靈魂,最終還是被帥氣的我所發現了。
? ? ? ? ? ? ?原因:籠統的說就是Android和Ios的webview對touchmove的處理方式不一樣。
? ? ? ? ? ? ?詳細說一下解決辦法:首先需要把preventDefault屬性設置為false。然后單獨禁止一下ios的touchmove默認事件
? ? ? ? ? ? ?之后你就可以舒心的用你自定義的長按事件了。
? ?Question2:寫了這么長了,言簡意賅描述一下這個問題吧,我們都知道在webview做下拉刷新和上拉加載這兩個效果用的最多的可能就是利用iscroll來做了吧,但是當某個失戀無聊沒有任何耐心的用戶不停地不停地不停地下拉你的webview來刷新獲取新數據時(你可能會問他智障嗎為什么會一下下拉這破玩意,對,他就是智障,打了我們公司的客服電話投訴了這個問題,你說無奈不無奈)并且恰巧webview中存在較多的1:1,4:3等多種不同比例的圖片,而且圖片都是后臺傳過來的,這時候你會發現iscroll可能就會出現崩潰的現象!!!
? ? ? ? ? ? ?原因:iscroll會先加載標簽的高度來占位,當你所有圖片的高度都是動態獲取的并且沒法固定每個版塊的高度時這時候iscroll就會懵逼。
? ? ? ? ? ? ?解決辦法:可以用時下最流行的vue中一個叫Mint UI的組件庫,這個插件用的是瀏覽器自帶的滾動而不是模擬的,所以效果要好很多。
好了,今天先寫到這吧------------------------------------------------------------------------