javascript Slip.js實(shí)現(xiàn)整屏滑動(dòng)的手機(jī)網(wǎng)頁(yè)
有了Slip.js，你只管寫HTML，CSS，如果邏輯簡(jiǎn)單，一行JS代碼就可以搞定，大大提升了開發(fā)的效率。不吹牛，上面的demo，不到半小時(shí)我就寫好了。
具體怎么做呢？比如有個(gè)需求是：
我們有4個(gè)頁(yè)面，每個(gè)頁(yè)面有一張圖片，每次手指滑動(dòng)都切換一整屏。
首先看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);
解說(shuō)：
- Slip：暴露到全局的方法，只要你引入slip.js，就可以得到這個(gè)實(shí)用牛逼的方法。
- container: 被滑動(dòng)的容器，里面是每個(gè)滑動(dòng)頁(yè)面。
- 'y': 頁(yè)面滑動(dòng)的方向，你也可以傳入'x'。
- webapp: 設(shè)置頁(yè)面展現(xiàn)為全屏滑動(dòng)頁(yè)面的方法。
- pages: 頁(yè)面元素列表。
說(shuō)好的一行代碼搞定的：
Slip(document.getElementById('container'), 'y').webapp();
可以發(fā)現(xiàn)，上面的一行代碼并沒(méi)有定義pages:
當(dāng)webapp方法不傳遞參數(shù)的時(shí)候，Slip會(huì)獲取container的直接子元素（兒子元素）作為pages。
至此，一個(gè)全屏滑動(dòng)網(wǎng)頁(yè)就完成了，難以想象的簡(jiǎn)單快速。我用半小時(shí)，你10分鐘應(yīng)該就可以。
當(dāng)然：Slip.js還有很多更強(qiáng)大的功能，比如你可以自己定義頁(yè)面滑動(dòng)時(shí)要做什么，PM看你完成的這么快，就給你加了很有意思的需求：
當(dāng)頁(yè)面滑動(dòng)到最后一頁(yè)的時(shí)候，刷新一下。。。
你只需要加幾行代碼就可以搞定：
Slip(document.getElementById('container'), 'y').webapp().end(function() {
if (this.page === 3) location.reload();
});
看，是不是很簡(jiǎn)單，是不是還沒(méi)來(lái)得及抱怨這個(gè)需求，就已經(jīng)完成它了，是不是有種前所未有的快感。
以上就是本文的全部?jī)?nèi)容，希望大家喜歡，這篇文章只是一個(gè)開始，之后會(huì)有更加全面精彩的文章等著大家，希望大家不要錯(cuò)過(guò)。
相關(guān)文章
JS實(shí)現(xiàn)隨頁(yè)面滾動(dòng)顯示/隱藏窗口固定位置元素
窗口固定位置顯示元素，當(dāng)頁(yè)面高度大于某高度，并且頁(yè)面向下滾動(dòng)時(shí)，顯示該元素；當(dāng)頁(yè)面位置小于某高度，或者頁(yè)面向上滾動(dòng)時(shí)，隱藏該元素，下面通過(guò)本文給大家介紹JS實(shí)現(xiàn)隨頁(yè)面滾動(dòng)顯示/隱藏窗口固定位置元素，需要的朋友參考下吧2016-02-02
JS也玩OO繼承...2007-01-01
JavaScript自定義等待wait函數(shù)實(shí)例分析
這篇文章主要介紹了JavaScript自定義等待wait函數(shù),實(shí)例分析了自定義等待函數(shù)的實(shí)現(xiàn)與使用技巧,需要的朋友可以參考下2015-03-03
JavaScript實(shí)現(xiàn)像雪花一樣的Hexaflake分形
這篇文章主要介紹了JavaScript實(shí)現(xiàn)像雪花一樣的Hexaflake分形，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
Javascript與vbscript數(shù)據(jù)共享
Javascript與vbscript數(shù)據(jù)共享...2007-01-01
細(xì)數(shù)promise與async/await的使用及區(qū)別說(shuō)明
這篇文章主要介紹了細(xì)數(shù)promise與async/await的使用及區(qū)別說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
JS表格組件神器bootstrap table詳解（強(qiáng)化版）
這篇文章主要以實(shí)例的方式為大家再次介紹了JS表格組件神器bootstrap table，bootstrap table界面采用扁平化的風(fēng)格，用戶體驗(yàn)比較好，更好兼容各種客戶端，需要了解更多bootstrap table的朋友可以參考下2016-05-05
本文主要分享了利用canvas如何繪制圓形時(shí)鐘的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
這篇文章主要介紹了JavaScript函數(shù)IIFE使用詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
JavaScript實(shí)現(xiàn)簡(jiǎn)單進(jìn)度條效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單進(jìn)度條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03