iScroll介绍
iScroll是一个高性能,资源占用少,无依赖,跨平台的javascript上拉加载,下拉刷新的滚动插件,目前版本v5.2.0。
GitHub下载地址:https://github.com/cubiq/iscroll
iScroll版本
iScroll进行了不同的优化,为了达到更高的性能,iScroll分为了多个版本,你可以根据项目选择最适合的版本。
目前有以下版本:
iScroll使用
页面引用
<script type="text/javascript" src="iscroll.js"></script>
HTML结构
<div id="wrapper">
<ul>
<li>...</li>
<li>...</li>
......
<li>...</li>
</ul>
</div>
初始化脚本
<script type="text/javascript">
var myScroll = new IScroll('#wrapper');
</script>
配置参数说明
var myScroll = new IScroll('#wrapper', {
mouseWheel: true, //是否监听鼠标滚轮事件
scrollbars: true, //是否显示默认滚动条
preventDefault: true,//是否屏蔽默认事件
preventDefaultException:{tagName:/^(INPUT|TEXTAREA|BUTTON|SELECT)$/ }, //列出哪些元素不屏蔽默认事件
probeType: 3,//需要使用 iscroll-probe.js 才能生效 probeType : 1 滚动不繁忙的时候触发;probeType : 2 滚动时每隔一定时间触;probeType : 3 每滚动一像素触发一次
});
iScroll属性方法
功能 | 方法名 | 说明 |
---|---|---|
滚动 | scrollTo(x, y, time, easing) | 滚动到: x , y ,事件, easing方式x:inty:inttime:intEasing: quadratic | circular | back | bounce | elastic见 IScroll.utils.ease 对象例:myScroll.scrollTo(0, -100, 1000, IScroll.utils.ease.elastic); |
滚动到相对于当前位置的某处 | scrollBy(x, y, time, easing) | |
滚动到某个元素 | scrollToElement(el, time, offsetX, offsetY, easing) ;el:为必须的参数;offsetX/offsetY :相对于 el 元素的位移。设为 true 即为屏幕中心 | |
分割页面 snap | goToPage(x, y, time, easing) | 根据 options.snap 分割页面,跳转到横向、纵向某页。 XY 可以同时生效。 |
next() prev() | 上一页,下一页结合 options.snap使用 | |
缩放 | zoom(scale, x, y, time) | 缩放容器Scale: 缩放因子 |
刷新 | refresh() | 刷新 IScroll |
销毁 | destroy() | 销毁 IScroll ,节省资源 |
iScroll事件
beforeScrollStart | 用户点击屏幕,但是还未初始化滚动前 |
---|---|
scrollCancel | 初始化滚动后又取消 |
scrollStart | 开始滚动 |
scroll | 滚动中 |
scrollEnd | 滚动结束 |
flick | 轻击屏幕左、右 |
zoomStart | 开始缩放 |
zoomEnd | 缩放结束 |
iScroll 可以处理用户进行移动交互的元素:滚动,缩放,平移,无限滚动,视差滚动,旋转等功能。
文章内容如果写的存在问题欢迎留言指出,让我们共同交流,共同探讨,共同进步~~~
文章如果对你有帮助,动动你的小手点个赞,鼓励一下,给我前行的动力。
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。