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

時間 2019-12-07

標籤使用 slip.js slip 快速建立滑動手機網頁欄目 JavaScript 简体版

原文原文鏈接

如今滑屏網頁愈來愈多，好比我在搜狐視頻就作了好幾個，舉個例子，能夠用手機掃描如下的二維碼訪問：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如何實現，能夠查看源碼。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。