佛說“事物都有其兩面性”胰舆,媽蛋用個破插件還能感悟出哲理志秃。
? ? 前一天你還感慨iscroll大法好漠魏,等到今天你真正看透了這小子的真實面目,卻噼里啪啦的問候創(chuàng)造人家小可愛的母親害你加班他去,害你沒時間玩王者榮耀,害你不能跟姑娘約會倒堕。
? ? 說了堆沒用的灾测,整點技術(shù)性的吧。說到iscroll首先要了解它滾動的原理是什么垦巴,看一下剛剛畫的這個極簡的圖媳搪。
原理:外層盒子outBox設(shè)置,height:100%骤宣;width:100%秦爆;position:relative;
? ? ? ? ? 內(nèi)層盒子innerBox設(shè)置憔披,width:100%等限;position:absolute;讓內(nèi)容自然撐開盒子高度芬膝。
? ? ? ? ? 于是乎大家就能看出來了望门,Iscroll其實就是控制內(nèi)層盒子的滾動來實現(xiàn)頁面的滾動效果。
也就是說iscroll其實是自己模擬了瀏覽器的滾動效果锰霜,并不是利用手機(jī)自帶瀏覽器的滾動筹误,‘永遠(yuǎn)被模仿,無法被超越’用在自帶瀏覽器上也不足為奇吧癣缅,你用橘黃色的鮮艷花朵想一下你個小團(tuán)隊自己做個模擬滾動效果厨剪,怎么可能會沒有問題呢,兼容性怎么可能沒有缺陷呢友存,效果怎么可能有瀏覽器自帶滾動好呢祷膳。單純的狗狗
? ? ?描述一下遇到的問題吧
? ? ? ? ?Question1:當(dāng)你來了一個需求說讓你在webview中添加一個長按的方法,這個webview偏偏還必須要引入iscroll爬立,這時候你會發(fā)現(xiàn)一些奇怪的小問題钾唬,從new一個iscroll開始。代碼是這樣擼的、
? ?可能有點繞仔細(xì)看一下接下來說的內(nèi)容:其實問題就出在preventDefault里面抡秆,如果把它設(shè)置為true則安卓無法監(jiān)聽到自定義的長按事件奕巍,ios倒是可以,兩者滾動起來還都流暢儒士;若設(shè)置為false的止,則兩者均可監(jiān)聽到自定義的長按事件,然而這時候ios的滾動卻出現(xiàn)了卡卡卡着撩,不流暢的問題诅福,兼職神煩,這不相互矛盾嗎拖叙,你說似不似氓润。然后我就可勁的找辦法,究其原因薯鳍,窺探其靈魂咖气,最終還是被帥氣的我所發(fā)現(xiàn)了。
? ? ? ? ? ? ?原因:籠統(tǒng)的說就是Android和Ios的webview對touchmove的處理方式不一樣挖滤。
? ? ? ? ? ? ?詳細(xì)說一下解決辦法:首先需要把preventDefault屬性設(shè)置為false崩溪。然后單獨禁止一下ios的touchmove默認(rèn)事件
? ? ? ? ? ? ?之后你就可以舒心的用你自定義的長按事件了。
? ?Question2:寫了這么長了斩松,言簡意賅描述一下這個問題吧伶唯,我們都知道在webview做下拉刷新和上拉加載這兩個效果用的最多的可能就是利用iscroll來做了吧,但是當(dāng)某個失戀無聊沒有任何耐心的用戶不停地不停地不停地下拉你的webview來刷新獲取新數(shù)據(jù)時(你可能會問他智障嗎為什么會一下下拉這破玩意惧盹,對乳幸,他就是智障,打了我們公司的客服電話投訴了這個問題钧椰,你說無奈不無奈)并且恰巧webview中存在較多的1:1反惕,4:3等多種不同比例的圖片,而且圖片都是后臺傳過來的演侯,這時候你會發(fā)現(xiàn)iscroll可能就會出現(xiàn)崩潰的現(xiàn)象W巳尽!秒际!
? ? ? ? ? ? ?原因:iscroll會先加載標(biāo)簽的高度來占位悬赏,當(dāng)你所有圖片的高度都是動態(tài)獲取的并且沒法固定每個版塊的高度時這時候iscroll就會懵逼。
? ? ? ? ? ? ?解決辦法:可以用時下最流行的vue中一個叫Mint UI的組件庫娄徊,這個插件用的是瀏覽器自帶的滾動而不是模擬的闽颇,所以效果要好很多。
好了寄锐,今天先寫到這吧------------------------------------------------------------------------