我們今天，用zepto.js的swipe來實現(xiàn)新浪手機網(wǎng)的tab菜單，大家可以先看下新浪的手機版。
我們可以看到，新浪導(dǎo)航那里，并不是百分比，而是寫好寬度，這樣，它可以根據(jù)需要添加個數(shù)，而我一開始就將代碼分成四個，因此，我們的tab個數(shù)就按百分比，分成四個顯示了。。。
這里，我加上了zepto.js的tap功能，主要是在我在IPAD上用click,結(jié)果發(fā)現(xiàn)民間幕會閃，好暈。。。
看到swipeLeft這個，你會不會想到之前的touchSwipe的寫法，有興趣的可以看看這文章：“touchSwipe實現(xiàn)3G鳳凰網(wǎng)手機觸屏Tab菜單”。不過，touchSwipe里就沒有tap這個函數(shù)了。。。
那么，這里提一下，我們這個zepto.js是修改過的，原來的版本，在IPAD及手機上滑動時，頁面會滾動，我在源文件里的touchmove寫上e,preventDefault()，結(jié)果連滾動條都動不了，頭暈啊。。。
在zepto.js里，我們也可以知道swipe這個功能實現(xiàn)的原理：
我們可以看到，是通過兩個點之間觸屏的距離來判斷是向左還是右或是向上向下swipe。。。
以上是我制作的效果截圖：
【網(wǎng)站聲明】本站除付費源碼經(jīng)過測試外，其他素材未做測試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請勿用于商業(yè)用途。如損害你的權(quán)益請聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。