SlipJs高效实现移动web页面整屏滑动
SlipJs简介
SlipJs 能做什么？SlipJs可以让你的手机网站像原生手机软件一样惯性滚动，手触图片轮换等等。Slip.js 是一个很小的 JavaScript 库，用于实现对触摸屏的互动 Swipe 和对元素重新排序列表（Reordering）。Slip.js 没有任何的依赖，你可以通过自定义 DOM 事件实现重新排序交互。
之前写这样的页面可能还要纠结选择什么库，然后再写一堆touch的事件，再加上写样式写HTML，可能几个小时就这么过去，才算完成。
有了Slip.js，你只管写HTML，CSS，如果逻辑简单，一行JS代码就可以搞定，大大提升了开发的效率。
slipJs 特性：
1、简单易用
几句简单的代码就可以实现复杂完美的效果，加上详细的中文教程，这一切都使你能快速的使用SlipJs。
2、追求极致的高性能
SlipJs 的每一行代码都追求极致的高性能，并独创 完美 , 流畅 双核模式
3、很小
SlipJs 很小，仅仅只有12kb（无zip压缩）帮你节省珍贵的移动流量。
4、兼容Android iOS SlipJs
可以完美的运行在这最流行的两大平台上。
使用方法：
1、html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slip.js</title>
<script type="text/javascript" src="slip.js"></script>
</head>
<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>
</html>
2、根据需要编写css
3、js代码
var container = document.getElementById('container');
var pages = document.querySelectorAll('.page');
var slip = Slip(container, 'y').webapp(pages);
说好的一行代码搞定的：
Slip(document.getElementById('container'), 'y').webapp();
上面的一行代码并没有定义pages: 当webapp方法不传递参数的时候，Slip会获取container的直接子元素作为pages。
至此，一个全屏滑动网页就完成了。
参数说明：
Slip：暴露到全局的方法，只要你引入slip.js，就可以得到这个实用牛逼的方法。
container: 被滑动的容器，里面是每个滑动页面。
'y': 页面滑动的方向，你也可以传入'x'。
webapp: 设置页面展现为全屏滑动页面的方法。
查看api文档：https://github.com/binnng/slip.js
查看源码：http://binnng.github.io/slip.js/docs/slip.html
SlipJs高效实现移动web页面整屏滑动：等您坐沙发呢！
发表评论
