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

資訊專欄INFORMATION COLUMN

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

keelii / 1140人閱讀

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

1.在iscroll4的滾動容器范圍內，點擊input框、select等表單元素時沒有響應
這個問題原因在于iscroll需要一直監聽用戶的touch操作，以便靈敏的做出對應效果，所以它把其余的默認事件屏蔽了，解決的方法是，在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時，它就不會執行e.preventDefault()，默認的事件就不會被屏蔽了。

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

2.往iscroll容器內添加內容時，容器閃動的bug

我在做上拉加載更多內容的時候，肯定需要把新的內容插入到容器內，這時發現有時容器會出現閃動，一開始認為是insert進去的內容太多，后來又覺得是不是因為里面布局用了float的原因導致重新渲染，最后通通排除。

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

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

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

改成：

 has3d = false

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

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

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

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

3.過長的滾動內容，導致卡頓和app直接閃退

說白了iscroll都是用js+css3實現的，對瀏覽器的消耗肯定是可觀的，避免無限制的內容加載本身就是web產品應該避免的。

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

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

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

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

4.左右滾動時，不能正確響應正文上下拉動

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

完美的解決方法是沒有的，如果把 e.preventDefault() 去掉，幻燈片的滾動效果就會大打折扣，而且有時用戶上下撥動的操作會被誤操作成幻燈片的滾動。所以在效果還是體驗上，大家還是自己選擇吧。在技術上解決不了的問題，我認為還是多和產品和UI溝通比較好，共同協商一個良好的方案。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83405.html

相關文章

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

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

    褰辯話 評論0 收藏0

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

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

    DevTalking 評論0 收藏0

  • 使用taro框架將手百小程序轉成h5總結

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

    svtter 評論0 收藏0

發表評論

0條評論

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