Zepto常見問題

Zepto遇到的問題

延時

總所周知，默認click事件，會有300ms的延時問題，Zepto的tap事件很好的解決了這個問題。可是也挖了一個大坑。

點透

Zepto的點透應該也是你們比較熟悉的了。當兩個層疊加的時候，上層綁定的tap事件觸發後會穿透到底層，剛好底層有個a標籤，頁面就跳轉了。爲了解決這個問題，我不得不把tap事件換成click事件，因爲click事件有延時，還得引入了第三方的類庫FastClick。

計算寬高

一個很簡單的Tip提示，例如‘操做成功’、‘登陸失敗’等等簡單的提示，Tip在show以前，我會計算讓Tip居中顯示：

var left = ($(window).width() - $pop.width()) / 2 + $(window).scrollLeft();

然而$pop.width()始終爲0，對於不可見元素，獲取的寬高度始終爲0，可是jQuery就能正常獲取到，我又不得不採起以下的處理方式：

var cssShow = {visibility: 'hidden', display: 'block'};

var cssHide = {visibility: 'visible', display: 'none'};

 

$pop.css(cssShow);

var left = ($(window).width() - $pop.width()) / 2 + $(window).scrollLeft();

$pop.css(cssHide);

 

 $pop.css({

     left: left > 0 ? left : 0

 });

小結

Zepto相對於JQuery來講確實比較輕量，可是成熟度還差得遠，當出現點透和計算寬高失效的時候，我對Zepto有點灰心，但願Zepto後續可以及時升級解決這些問題，否則就使用jQuery了，特別是jQuery升級到版本2，也是至關不錯的選擇。

瀏覽器的坑

禁用滾動

當頁面彈出一個選擇框。滑動屏幕，背後的頁面跟着滾動，特別是在safari下，那效果太噁心，因此我選擇禁用body的滾動。最暴力的解決方式是：

$(document).on('touchmove',function(e){

    e.preventDefault();

});

這樣會同時禁用掉彈出層的滾動效果，明顯不可取，因此我才用下面的方式：

.alpha {

    height: 100%;

    overflow: hidden;

    position: relative;

}

 

.alpha body {

    height: 100%;

    overflow: hidden;

}

 

當遮蓋彈出的時候或者隱藏的時候讓html切換class alpha

$('html').toggleClass('alpha');

回到頂部

對於PC端，直接這樣寫，就會有一個向上平滑滾動的效果，然而對於移動端來講，並無什麼卵用：

$('body,html').animate({scrollTop: 0});

仍是使用了第三方的插件模式出這個效果的scrollToTop。

Css中的…

單

Width:100px;  white-space:nowrap;   overflow:hidden;   text-overflow:ellipsis;

多行

Display:-webkit-box;  -webkit-line-clamp:2;   -webkit-box-orient:vertical;  overflow:hidden;

 

一個元素在另外一個元素中水平垂直居中