使用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如何实现，能够查看源码。