滑屏代码android,SlipJs高效实现移动web页面整屏滑动_蓝戒的博客

SlipJs是一个轻量级的JavaScript库,专为触摸屏设计,提供惯性滚动和元素重新排序功能。它无依赖,体积小,支持Android和iOS平台,能帮助开发者快速创建全屏滑动网页。只需几行代码,即可实现复杂的手势交互,提高开发效率。
摘要由CSDN通过智能技术生成

SlipJs简介

a0c81773eebe8310cae1feb8d11c5515.gif

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.js
1.png
2.png
3.png
4.png

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: 设置页面展现为全屏滑动页面的方法。

pages: 页面元素列表。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值