javascript Slip.js實作整屏滑動的手機網頁_javascript技巧
- WBOY原創
- 2016-05-16 15:29:501374瀏覽
有了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：暴露到全局的方法，只要你引入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();
});
你看，是不是很簡單，是不是還來不及抱怨這個需求，就已經完成它了，是不是有種前所未有的快感。
以上就是本文的全部內容，希望大家喜歡，這篇文章只是一個開始，之後會有更全面精彩的文章等著大家，希望大家不要錯過。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn