如今滑屏網頁愈來愈多,好比我在搜狐視頻就作了好幾個,舉個例子,能夠用手機掃描如下的二維碼訪問:javascript
以前寫這樣的頁面可能還要糾結選擇什麼庫,而後再寫一堆touch
的事件,再加上寫樣式寫HTML,可能幾個小時就這麼過去,纔算完成。html
如今不同了。java
有了Slip.js
,你只管寫HTML,CSS,若是邏輯簡單,一行JS代碼就能夠搞定,大大提高了開發的效率。不吹牛,上面的demo,不到半小時我就寫好了。ios
具體怎麼作呢?好比有個需求是:git
咱們有4個頁面,每一個頁面有一張圖片,每次手指滑動都切換一整屏。github
首先看HTML:web
<!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:app
/* 按本身須要來定義吧,不寫也不要緊 */
最後看JS:webapp
var container = document.getElementById('container'); var pages = document.querySelectorAll('.page'); var slip = Slip(container, 'y').webapp(pages);
就這麼簡單,能夠查看效果。this
解說:
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
如何實現,能夠查看源碼。