Slip.js能做什么?Slip.js可以讓你的手機網(wǎng)站像原生手機軟件一樣慣性滾動，手觸圖片輪換等等，對Slip.js感興趣的小伙伴們可以參考一下
有了Slip.js，你只管寫HTML，CSS，如果邏輯簡單，一行JS代碼就可以搞定，大大提升了開發(fā)的效率。不吹牛，上面的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>
最后看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:
設置頁面展現(xiàn)為全屏滑動頁面的方法。
pages:
頁面元素列表。
說好的一行代碼搞定的：
Slip(document.getElementById('container'), 'y').webapp();
可以發(fā)現(xiàn)，上面的一行代碼并沒有定義pages:
當webapp方法不傳遞參數(shù)的時候，Slip會獲取container的直接子元素(兒子元素)作為pages。
至此，一個全屏滑動網(wǎng)頁就完成了，難以想象的簡單快速。我用半小時，你10分鐘應該就可以。
當然：Slip.js還有很多更強大的功能，比如你可以自己定義頁面滑動時要做什么，PM看你完成的這么快，就給你加了很有意思的需求：
當頁面滑動到最后一頁的時候，刷新一下。。。
你只需要加幾行代碼就可以搞定：
- Slip(document.getElementById('container'), 'y').webapp().end(function() {
- if (this.page === 3) location.reload();
- });
看，是不是很簡單，是不是還沒來得及抱怨這個需求，就已經(jīng)完成它了，是不是有種前所未有的快感。
以上就是本文的全部內(nèi)容，希望大家喜歡，這篇文章只是一個開始，之后會有更加全面精彩的文章等著大家，希望大家不要錯過。
新聞熱點
疑難解答
圖片精選
