国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

使用iscroll4可能會遇到的問題(轉(zhuǎn)：記錄)

keelii / 1144人閱讀

摘要：只針對，因為的暫時還不支持，會自動選擇不用。原因還是和問題一樣的，因為屏蔽了默認事件。在技術(shù)上解決不了的問題，我認為還是多和產(chǎn)品和溝通比較好，共同協(xié)商一個良好的方案。

1.在iscroll4的滾動容器范圍內(nèi)，點擊input框、select等表單元素時沒有響應(yīng)
這個問題原因在于iscroll需要一直監(jiān)聽用戶的touch操作，以便靈敏的做出對應(yīng)效果，所以它把其余的默認事件屏蔽了，解決的方法是，在iscroll4源碼里面找到這一行，

 onBeforeScrollStart: function (e) { e.preventDefault(); }

然后把它改成：

onBeforeScrollStart: function (e) { 
var nodeType = e.explicitOriginalTarget？e.explicitOriginalTarget.nodeName.toLowerCase():(e.target？ e.target.nodeName.toLowerCase():"");
if(nodeType !="select"&& nodeType !="option"&& nodeType !="input"&& nodeType!="textarea") e.preventDefault(); 
}

這樣只要你touch的元素是 select || option || input || textarea時，它就不會執(zhí)行e.preventDefault()，默認的事件就不會被屏蔽了。

如果你有其他不想被屏蔽的元素，可以自己修改，不過需要注意onBeforeScrollStart里的屏蔽默認事件很重要，它是iscroll進行流暢滾動的基礎(chǔ)，不要隨便的把它去掉，否則你會發(fā)現(xiàn)滾動起來很卡頓。

2.往iscroll容器內(nèi)添加內(nèi)容時，容器閃動的bug

我在做上拉加載更多內(nèi)容的時候，肯定需要把新的內(nèi)容插入到容器內(nèi)，這時發(fā)現(xiàn)有時容器會出現(xiàn)閃動，一開始認為是insert進去的內(nèi)容太多，后來又覺得是不是因為里面布局用了float的原因?qū)е轮匦落秩荆詈笸ㄍㄅ懦?/p>

其實病灶在于iscroll使用了太為先進的CSS3屬性，可能web webkit對這些屬性的支持力度還是不夠好。

涉及的兩個屬性是 translate3d 和 TransitionTimingFunction，或許是這兩個屬性在列表長度改變時會影響到渲染，所以導(dǎo)致頁面閃動，解決辦法就是找到源代碼的，

 has3d = "WebKitCSSMatrix" in window && "m11" in new WebKitCSSMatrix()

改成：

 has3d = false

和在配置iscroll時，useTransition設(shè)置成false就可以了（useTransition默認是false的）。

這樣做有一點瑕疵就是滾動起來和原來比沒那么流暢了（原來的效果真的是可以媲美原生app的），但是假如你不對比的話，是看不出來了。

在效果和體驗上面選擇，我更看重體驗。

不過如果你符合下面的條件，我還是不建議你修改成我這樣：
1)即使你不修改，無論你怎么往iscroll容器里面插內(nèi)容，它都不會閃動，這種情況大多出現(xiàn)在純文字的列表。假如列表涉及復(fù)雜的布局和圖片，很多時候會出現(xiàn)閃動bug
2)如果你的web app只是單純在手機瀏覽器瀏覽。translate3d 和 TransitionTimingFunction只是在IOS里的uiwebview支持不成熟，但是在手機上的safari完全沒有問題，所以如果你不是用phonegap之類的框架開發(fā)混合app，你不需要擔心這個問題。
3)只針對android，因為android的webkit暫時還不支持translate3d，iscroll會自動選擇不用。

3.過長的滾動內(nèi)容，導(dǎo)致卡頓和app直接閃退

說白了iscroll都是用js+css3實現(xiàn)的，對瀏覽器的消耗肯定是可觀的，避免無限制的內(nèi)容加載本身就是web產(chǎn)品應(yīng)該避免的。

假如無可避免，我們可以盡量減低iscroll對瀏覽器內(nèi)存的消耗

    1)不要使用checkDOMChanges。雖然checkDOMChanges很方便，定時檢測容器長度是否變化來refresh，但這也意味著你要消耗一個Interval的內(nèi)存空間

    2)隱藏iscroll滾動條，配置時設(shè)置hScrollbar和vScrollbar為false。

    3)不得已的情況下，去掉各種效果，momentum、useTransform、useTransition都設(shè)置為false

4.左右滾動時，不能正確響應(yīng)正文上下拉動

在做這種效果時 ，假如這個幻燈片模塊只是你頁面的一部分，你還需要上下拉動頁面去瀏覽其它內(nèi)容時，你的手指在這個模塊上做上下?lián)軇訒r，恐怕會沒有反應(yīng)。原因還是和問題1一樣的，因為屏蔽了默認事件。

完美的解決方法是沒有的，如果把 e.preventDefault() 去掉，幻燈片的滾動效果就會大打折扣，而且有時用戶上下?lián)軇拥牟僮鲿徽`操作成幻燈片的滾動。所以在效果還是體驗上，大家還是自己選擇吧。在技術(shù)上解決不了的問題，我認為還是多和產(chǎn)品和UI溝通比較好，共同協(xié)商一個良好的方案。

基本的心得就是這些拉，希望對大家有幫助。（轉(zhuǎn)）

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/83405.html

相關(guān)文章

  • 使用iscroll4可能會遇到的問題(轉(zhuǎn)：記錄)

    摘要：只針對，因為的暫時還不支持，會自動選擇不用。原因還是和問題一樣的，因為屏蔽了默認事件。在技術(shù)上解決不了的問題，我認為還是多和產(chǎn)品和溝通比較好，共同協(xié)商一個良好的方案。 1.在iscroll4的滾動容器范圍內(nèi)，點擊input框、select等表單元素時沒有響應(yīng)這個問題原因在于iscroll需要一直監(jiān)聽用戶的touch操作，以便靈敏的做出對應(yīng)效果，所以它把其余的默認事件屏蔽了，解決的方法是...

    褰辯話 評論0 收藏0

  • Vue 實踐過程中的幾個問題

    摘要：前言本篇是我在使用過程中，遇到的幾個小問題和之前不了解的東西，記錄下來，希望能夠幫助各位踩坑。小結(jié)上面就是我分享的幾個小問題，希望大家看了能夠有所收獲另明年準備去上海，如果小伙伴的公司有坑，可以聯(lián)系一下我。 前言 本篇是我在使用vue過程中，遇到的幾個小問題和之前不了解的東西，記錄下來，希望能夠幫助各位踩坑。如果喜歡的話可以點波贊，或者關(guān)注一下，希望本文可以幫到大家。 本文首發(fā)于我的個...

    DevTalking 評論0 收藏0

  • 使用taro框架將手百小程序轉(zhuǎn)成h5總結(jié)

    摘要：前言歷時一周，終于成功兼容了和小程序，在此使用的框架，遇到的問題在此記錄一下。四表單手百小程序組件是支持模式，直接可以實現(xiàn)省市區(qū)選擇，但是框架不支持，需要用的功能來實現(xiàn)省市區(qū)的選擇。 前言 歷時一周，終于成功兼容了h5和小程序，在此使用的taro框架，遇到的問題在此記錄一下。 一、環(huán)境判斷 使用 Taro，我們可以只書寫一套代碼，再通過 Taro 的編譯工具，將源代碼分別編譯出可以在不...

    svtter 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<