關(guān)于iscroll的坑坑洼洼

佛說“事物都有其兩面性”胰舆,媽蛋用個破插件還能感悟出哲理志秃。

? ? 前一天你還感慨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)隊自己做個模擬滾動效果厨剪,怎么可能會沒有問題呢,兼容性怎么可能沒有缺陷呢友存,效果怎么可能有瀏覽器自帶滾動好呢祷膳。單純的狗狗

圖片發(fā)自簡書App

? ? ?描述一下遇到的問題吧

? ? ? ? ?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的組件庫娄徊,這個插件用的是瀏覽器自帶的滾動而不是模擬的闽颇,所以效果要好很多。

好了寄锐,今天先寫到這吧------------------------------------------------------------------------

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末兵多,一起剝皮案震驚了整個濱河市尖啡,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌剩膘,老刑警劉巖衅斩,帶你破解...
    沈念sama閱讀 219,270評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異怠褐,居然都是意外死亡畏梆,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,489評論 3 395
  • 文/潘曉璐 我一進(jìn)店門奈懒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來奠涌,“玉大人,你說我怎么就攤上這事磷杏×锍” “怎么了?”我有些...
    開封第一講書人閱讀 165,630評論 0 356
  • 文/不壞的土叔 我叫張陵极祸,是天一觀的道長达皿。 經(jīng)常有香客問我,道長贿肩,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,906評論 1 295
  • 正文 為了忘掉前任龄寞,我火速辦了婚禮汰规,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘物邑。我一直安慰自己溜哮,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,928評論 6 392
  • 文/花漫 我一把揭開白布色解。 她就那樣靜靜地躺著茂嗓,像睡著了一般。 火紅的嫁衣襯著肌膚如雪科阎。 梳的紋絲不亂的頭發(fā)上述吸,一...
    開封第一講書人閱讀 51,718評論 1 305
  • 那天,我揣著相機(jī)與錄音锣笨,去河邊找鬼蝌矛。 笑死,一個胖子當(dāng)著我的面吹牛错英,可吹牛的內(nèi)容都是我干的入撒。 我是一名探鬼主播,決...
    沈念sama閱讀 40,442評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼椭岩,長吁一口氣:“原來是場噩夢啊……” “哼茅逮!你這毒婦竟也來了璃赡?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,345評論 0 276
  • 序言:老撾萬榮一對情侶失蹤献雅,失蹤者是張志新(化名)和其女友劉穎碉考,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體惩琉,經(jīng)...
    沈念sama閱讀 45,802評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡豆励,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,984評論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了瞒渠。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片良蒸。...
    茶點故事閱讀 40,117評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖伍玖,靈堂內(nèi)的尸體忽然破棺而出嫩痰,到底是詐尸還是另有隱情,我是刑警寧澤窍箍,帶...
    沈念sama閱讀 35,810評論 5 346
  • 正文 年R本政府宣布串纺,位于F島的核電站,受9級特大地震影響椰棘,放射性物質(zhì)發(fā)生泄漏纺棺。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,462評論 3 331
  • 文/蒙蒙 一邪狞、第九天 我趴在偏房一處隱蔽的房頂上張望祷蝌。 院中可真熱鬧,春花似錦帆卓、人聲如沸巨朦。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,011評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽糊啡。三九已至,卻和暖如春吁津,著一層夾襖步出監(jiān)牢的瞬間棚蓄,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,139評論 1 272
  • 我被黑心中介騙來泰國打工碍脏, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留癣疟,地道東北人。 一個月前我還...
    沈念sama閱讀 48,377評論 3 373
  • 正文 我出身青樓潮酒,卻偏偏與公主長得像睛挚,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子急黎,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,060評論 2 355

推薦閱讀更多精彩內(nèi)容