IScroll5 中文API参数说明和调用方法


Posted in Javascript onMay 21, 2016

官网:http://iscrolljs.com/

IScroll最简单的DOM结构:

<div id="wrapper"> 
 <ul> 
 <li>...</li> 
 <li>...</li> 
 ... 
 </ul> 
</div>

初始化iscroll

var myScroll = new IScroll('#wrapper',options);

初始化设置

初始化设置使用实例:

var myScroll = new IScroll('#wrapper', { 
 mouseWheel: true, 
 scrollbars: true 
});

设置列表:

所属 属性名 说明 默认值
核心库 croe options.useTransform 是否使用CSS3的Transform属性 true
options.useTransition 是否使用CSS3的Transition属性,否则使用requestAnimationFram代替 true
options.HWCompositing 是否启用硬件加速 true
options.bounce 是否启用弹力动画效果,关掉可以加速 true
基础特性 Basic features options.click 是否启用click事件。建议关闭此选项并启用自定义的tap事件(options.tap) false
options.disableMouse 是否关闭鼠标事件探测。如知道运行在哪个平台,可以开启它来加速。 false
options.disablePointer 是否关闭指针事件探测。如知道运行在哪个平台,可以开启它来加速。 false
options.disableTouch 是否关闭触摸事件探测。如知道运行在哪个平台,可以开启它来加速。 false
options.eventPassthrough 使用IScroll的横轴滚动时,如想使用系统立轴滚动并在横轴上生效,请开启。 event passthrough demo false
options.freeScroll 主要在上下左右滚动都生效时使用,可以向任意方向滚动。 2D scroll demo false
options.keyBindings 绑定按键事件。 Key bindings false
options.invertWheelDirection 反向鼠标滚轮。 false
options.momentum 是否开启动量动画,关闭可以提升效率。 true
options.mouseWheel 是否监听鼠标滚轮事件。 false
options.preventDefault 是否屏蔽默认事件。 true
options.scrollbars 是否显示默认滚动条 false
options.scrollX options.scrollY 可以设置是否显示横向或纵向滚动条 scrollX false scrollY true
options.tap 是否启用自定义的tap事件 可以自定义tap事件名 false
滚动条 Scrollbars options.scrollbars 是否显示默认滚动条 false
options.fadeScrollbars 是否渐隐滚动条,关掉可以加速 true
options.interactiveScrollbars 用户是否可以拖动滚动条 false
options.resizeScrollbars 是否固定滚动条大小,建议自定义滚动条时可开启。 false
options.shrinkScrollbars 滚动超出滚动边界时,是否收缩滚动条。 ‘clip':裁剪超出的滚动条 ‘scale':按比例的收缩滚动条(占用CPU资源) false:不收缩, false
options.indicators 指示IScroll该如何滚动,Scrollbars的底层实现方式。
options.indicators.el 制定滚动条的容器。容器中的第一个元素即为指示器。 例如: indicators: { el: document.getElementById('indicator') } indicators: { el: '#indicator' }
options.indicators.ignoreBoundaries 是否忽略容器边界。设为true 可以设置滚动速度 parallax demo false
options.indicators.listenX options.indicators.listenY 指示器监听那个方向的滚动,可以设置为一个方向或2个方向 true
options.indicators.speedRatioX options.indicators.speedRatioY 指示器相对主滚动条的速度 0
options.indicators.fade options.indicators.interactive options.indicators.resize options.indicators.shrink 如scrollbars的设置 minimap demo
options.probeType 需要使用iscroll-probe.js才能生效 probeType:1 滚动不繁忙的时候触发 probeType:2 滚动时每隔一定时间触发 probeType:3 每滚动一像素触发一次
分割页面snap options.snap 自动分割容器,用于制作走马灯效果等。 Options.snap:true//根据容器尺寸自动分割 Options.snap:el//根据元素分割 false
缩放 zoom options.zoom 是否打开缩放 最好使用iscroll-zoom.js 如放大模糊,可将源容器定义为2倍大小,然后scale(0.5) zoom demo false
options.zoomMax 最大缩放等级 4
options.zoomMin 最小缩放等级 1
options.startZoom 初始缩放等级 1
options.wheelAction 滚轮动作 设为'zoom',可以用滚轮缩放 undefined
更多设置 options.bindToWrapper 光标、触摸超出容器时,是否停止滚动 false
options.bounceEasing 弹力动画效果 预置效果:'quadratic', 'circular', 'back', 'bounce', 'elastic'(最后两个不能通过css3表现) 还可以自定义效果 bounceEasing: { style: 'cubic-bezier(0,0,1,1)',//css3时 fn: function (k) { return k; }//不使用css3,使用requestAnimationFrame时 } 'circular'
options.bounceTime 弹力动画持续的毫秒数 600
options.deceleration 滚动动量减速 越大越快,建议不大于0.01 0.0006
options.mouseWheelSpeed 鼠标滚轮速度
options.preventDefaultException 列出哪些元素不屏蔽默认事件; {tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ }
options.resizePolling 重新调整窗口大小时,重新计算IScroll的时间间隔 60
键位绑定 options.keyBindings 监听按键事件控制IScroll 例如: keyBindings: { pageUp: 33, pageDown: 34, end: 35, home: 36, left: 37, up: 38, right: 39, down: 40 }

IScroll5的API:

所属 方法名 说明
滚动 scrollTo(x, y, time, easing) 滚动到:x,y,事件,easing方式 x:int y:int time:int Easing: 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即为屏幕中心 scroll to element
分割页面snap goToPage(x, y, time, easing) 根据options.snap分割页面,跳转到横向、纵向某页。XY可以同时生效。 结合options.snap使用
next() prev() 上一页,下一页 结合options.snap使用
缩放 zoom(scale, x, y, time) 缩放容器 Scale:缩放因子
刷新 refresh() 刷新IScroll
销毁 destroy() 销毁IScroll,节省资源

IScroll的事件:

beforeScrollStart 用户点击屏幕,但是还未初始化滚动前
scrollCancel 初始化滚动后又取消
scrollStart 开始滚动
scroll 滚动中
scrollEnd 滚动结束
flick 轻击屏幕左、右
zoomStart 开始缩放
zoomEnd 缩放结束

事件使用实例:

myScroll = new IScroll('#wrapper'); 
myScroll.on('scrollEnd', doSomething);

IScroll的属性:

myScroll.x/y 当前位置
myScroll.directionX/Y 上一次的滚动方向(-1 下/右, 0 保持原状, 1 上/左)
myScroll.currentPage 当前Snap信息
myScroll.maxScrollXmyScroll.maxScrollY 当滚动到底部时的 myScroll.x/y
Javascript 相关文章推荐
幻宇的层模拟窗口效果-提供演示和下载
Jan 20 Javascript
JavaScript this调用规则说明
Mar 08 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
Sep 12 Javascript
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
在JS中如何调用JSP中的变量
Jan 22 Javascript
thinkphp中常用的系统常量和系统变量
Mar 05 Javascript
js验证真实姓名与身份证号是否匹配
Oct 13 Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 Javascript
JS限制条件补全问题实例分析
Dec 16 Javascript
移动web开发之touch事件实例详解
Jan 17 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
Sep 04 Javascript
JavaScript的ExtJS框架中表格的编写教程
May 21 #Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
May 21 #Javascript
jQuery插件pagination实现无刷新分页
May 21 #Javascript
JavaScript中对JSON对象的基本操作示例
May 21 #Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 #Javascript
jQuery EasyUI Pagination实现分页的常用方法
May 21 #Javascript
总结JavaScript设计模式编程中的享元模式使用
May 21 #Javascript
You might like
同一空间绑定多个域名而实现访问不同页面的PHP代码
2006/12/06 PHP
php获取post中的json数据的实现方法
2011/06/08 PHP
基于php无限分类的深入理解
2013/06/02 PHP
PHP中使用memcache存储session的三种配置方法
2014/04/05 PHP
php中time()与$_SERVER[REQUEST_TIME]用法区别
2014/11/19 PHP
php获取文件类型和文件信息的方法
2015/07/10 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
2010/06/05 Javascript
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
JQuery 操作/获取table具体代码
2013/06/13 Javascript
AngularJS入门教程之XHR和依赖注入详解
2016/08/18 Javascript
详解ECharts使用心得总结
2016/12/06 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
webpack4 css打包压缩问题的解决
2018/05/18 Javascript
解决Layui中layer报错的问题
2019/09/03 Javascript
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
简单介绍Python的轻便web框架Bottle
2015/04/08 Python
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
python实现简单神经网络算法
2018/03/10 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
python脚本调用iftop 统计业务应用流量的思路详解
2019/10/11 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
化学相关工作求职信
2013/10/02 职场文书
自动化专业本科毕业生求职信
2013/10/20 职场文书
企业节能减排实施方案
2014/03/19 职场文书
调研汇报材料范文
2014/08/17 职场文书
2016教师暑期培训学习心得体会
2016/01/09 职场文书
python - asyncio异步编程
2021/04/06 Python