使用Slip.js快速建立整屏滑動的手機網頁

如今滑屏網頁愈來愈多,好比我在搜狐視頻就作了好幾個,舉個例子,能夠用手機掃描如下的二維碼訪問:javascript

搜狐視頻客戶端完美適配iOS8

以前寫這樣的頁面可能還要糾結選擇什麼庫,而後再寫一堆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

搜狐視頻客戶端完美適配iOS8

解說:

  • 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();
});

看,是否是很簡單,是否是還沒來得及抱怨這個需求,就已經完成它了,是否是有種史無前例的快感。來看看效果吧。

搜狐視頻客戶端完美適配iOS8

注意:頁數是從0開始的,因此上面的最後一頁是3,而不是4。

若是你看到了這裏還沒離開,我想你對Slip.js應該仍是至少有點興趣的,那麼你能夠去Github關注它。

若是想迫切試用Slip.js,能夠直接查看文檔

若是想要看看Slip.js如何實現,能夠查看源碼

相關文章
相關標籤/搜索