有了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>
最後看JS:
var container = document.getElementById('container'); var pages = document.querySelectorAll('.page'); var slip = Slip(container, 'y').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(); });
看,是不是很簡單,是不是還沒來得及抱怨這個需求,就已經完成它了,是不是有種前所未有的快感。
以上就是本文的全部內容,希望大家喜歡,這篇文章只是一個開始,之後會有更加全面精彩的文章等著大家,希望大家不要錯過。