標籤：style blog http io os 使用 ar java strong
原文 http://segmentfault.com/blog/laopopo/1190000000708417
現在滑屏網頁越來越多，比如我在搜狐視頻就做了好幾個，舉個例子，可以用手機掃描以下的二維碼訪問：
之前寫這樣的頁面可能還要糾結選擇什麼庫，然後再寫一堆 touch 的事件，再加上寫樣式寫HTML，可能幾個小時就這麼過去，才算完成。
現在不一樣了。
有了 Slip.js ，你只管寫HTML，CSS，如果邏輯簡單，一行JS代碼就可以搞定，大大提升了開發的效率。不吹牛，上面的demo，不到半小時我就寫好了。
具體怎麼做呢？比如有個需求是：
我們有4個頁面，每個頁面有一張圖片，每次手指滑動都切換一整屏。
首先看HTML：
<!doctype html>...<script type="text/javascript" src="slip.js"></script><body>...<div id="container"> <div class="page page-1"><img src="img/1.png"></div> <div class="page page-2"><img src="img/2.png"></div> <div class="page page-3"><img src="img/3.png"></div> <div class="page page-4"><img src="img/4.png"></div></div></body>再看CSS:
/* 按自己需要來定義吧，不寫也沒關係 */最後看JS：
var container = document.getElementById(‘container‘);var pages = document.querySelectorAll(‘.page‘);var slip = Slip(container, ‘y‘).webapp(pages);就這麼簡單，可以查看 效果 。
解說：
Slip ：暴露到全域的方法，只要你引入 slip.js ，就可以得到這個實用牛逼的方法。
container : 被滑動的容器，裡面是每個滑動頁面。
‘y‘ : 頁面滑動的方向，你也可以傳入 ‘x‘ 。
webapp : 設定頁面展現為全屏滑動頁面的方法。
pages : 頁面元素列表。
說好的一行代碼搞定的：
Slip(document.getElementById(‘container‘), ‘y‘).webapp();可以發現，上面的一行代碼並沒有定義 pages :
當 webapp 方法不傳遞參數的時候，Slip會擷取 container 的直接子項目（兒子項目）作為 pages 。
至此，一個 全屏滑動網頁 就完成了，難以想象的簡單快速。我用半小時，你10分鐘應該就可以。
當然： Slip.js 還有很多更強大的功能，比如你可以自己定義頁面滑動時要做什麼，PM看你完成的這麼快，就給你加了很有意思的需求：
當頁面滑動到最後一頁的時候，重新整理一下。。。
你只需要加幾行代碼就可以搞定：
Slip(document.getElementById(‘container‘), ‘y‘).webapp().end(function() { if (this.page === 3) location.reload();});看，是不是很簡單，是不是還沒來得及抱怨這個需求，就已經完成它了，是不是有種前所未有的快感。來看看 效果 吧。
注意：頁數是從0開始的 ，所以上面的最後一頁是3，而不是4。
如果你看到了這裡還沒離開，我想你對 Slip.js 應該還是至少有點興趣的，那麼你可以去 Github 關注它。
如果想迫切試用 Slip.js ，可以直接查看 文檔 。
如果想要看看 Slip.js 如何?，可以查看 源碼 。
項目地址：http://binnng.github.io/slip.js/
gitub:https://github.com/binnng/slip.js/tarball/master
使用Slip.js快速建立整屏滑動的手機網頁
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
