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代码:
slip.js2、根据需要编写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: 设置页面展现为全屏滑动页面的方法。
pages: 页面元素列表。