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

官网: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

(0)

相关推荐

  • jQuery iScroll.js 移动端滚动条美化插件第1/5页

    官网:http://cubiq.org/iscroll-5 demo: 滚动刷新:http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/ 'Carousel' demo iScroll功能很强大,目前我只用来 自定义滚动条 以下简单介绍一下iscrol在移动端自定义滚动条时的使用和注意事项. 一.用法 iScroll对要滚动的元素进行初始化,且不限制一个页面中使用iScroll的元素个数. 使用iScroll时,DOM树的结构要足够

  • 学习使用jquery iScroll.js移动端滚动条插件

    大家在日常工作中最常用的插件是什么,jQurey?Lazyload?但是这些都是在PC端,但是在移动端最常用的插件莫过于iScroll了,iScroll到底是什么东西,应该怎么用?iScroll是个很强大的插件,我也只是略懂皮毛,这里我们简单的介绍一下. iScroll的产生: iScroll的产生完全是因为移动版webkit浏览器,例如在iPhone,Android 的移动设备上. iScroll的使用方法: iScroll的原理是外层有一个溢出隐藏(overflow:hidden;)的DOM

  • 基于iscroll.js实现下拉刷新和上拉加载效果

    现在已经不是纯Android独霸天下的时代了,H5嵌入Android的Hybrid混合开发是大势所趋.今天给大家带来的就是移动端中常见的"上拉刷新,下拉加载"特效,这个特效将会基于H5来实现. 先看下运行效果: 是不是有点小小的'鸡冻' ,它就是由我们今天要介绍的主人公'iscroll.js'实现的,接下来我以最最简便的方式教给大家~~ 实现步骤 一.准备好iscroll.js库 到官网下载即可: https://github.com/cubiq/iscroll 二.搭建页面结构 &l

  • iScroll中事件点击触发两次解决方案

    之前也看了很多朋友的文章里有讲这个问题.比如使用一个变量记录执行的间隔时间什么的.感觉每次都要去撸一下,比较累人.本人喜欢搬砖前先选工具.其实解决这个方法很简单.iScroll呢其实是截获了点击浏览器时的touchstart和touchend事件.在touchend的时候使用js去触发元素的onclick事件(_end这个函数).而在实际操作中,先执行了touchend,然后再执行了一次onclick的相关函数.这样就形成了头疼的一次点击两次触发.这本来就一个不是问题的问题.之所以说这是个问题,

  • iscroll.js的上拉下拉刷新时无法回弹的解决方法

    使用过iscroll.js的上拉下拉刷新效果的朋友应该都碰到过这个问题:在iOS的浏览器中,上拉或下拉刷新时,当手指划出屏幕后,页面无法弹回.很多人因为解决不了这个问题,干脆就那样不解决了,还有的直接就不用HTML了,使用原生代替HTML页面. 相信很多朋友也有自己的解决办法,只是没写出来,所以网上都搜不到解决方案.在很多QQ群里面也有很多人在问该怎么解决这个问题,所以我写这篇文章记录一下我的解决方案,希望对一些朋友有所帮助. 上拉下拉刷新的主要代码: myScroll = new iScrol

  • JQuery插件iScroll实现下拉刷新,滚动翻页特效

    JQuery插件:iScroll 页面布局: <div id="wrapper"> <div id="scroller"> <div id="pullDown"> <span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span> <

  • iScroll.js 使用方法参考

    概要 iScroll 4 这个版本完全重写了iScroll这个框架的原始代码.这个项目的产生完全是因为移动版webkit浏览器(诸如iPhone,iPad,Android 这些系统上广泛使用) 提供了一种本地化的方式来对一个限定了高度和宽度的元素的内容进行滑动.很不幸的是,这种情况下所有的web应用的页面就不能够包含具有position:absolute的头.页尾或者是一个内容可滚动的 中间区域. 然而,Android系统最新修订版已经可以支持这种功能了(尽管支持的力度还不是特别好),Apple

  • iscroll碰到Select无法选择下拉刷新的解决办法

    第一步: 在handleTarget函数方法开始加入: 复制代码 代码如下: var theTarget = e.target; if (theTarget != null && theTarget.tagName == 'SELECT') {     return false; } 第二步: 在 touchStart函数处即_start()处必须加入: 复制代码 代码如下: if (e.target.tagName != "SELECT") {      e.prev

  • 基于HTML5上使用iScroll实现下拉刷新,上拉加载更多

    前言 前一段有个手机端的项目需要用到下拉刷新和上拉加载更多的效果,脑海里第一反映就是微博那种效果,刚开始的理解有些偏差,以为下拉也是追加数据,上拉也是追加数据,后请教同事后发现其实下拉只是刷新最新数据而已,上拉是追加数据. 使用技巧 1.引用iScroll.js, 在初始化时添加两个事件监听:touchMove.DOMContentLoaded. 2.实现iScroll插件的onScrollEnd事件, 也就是在这个事件里调用你自己的ajax方法实现数据的刷新和追加. 3.上拉加载更多请求后台时

  • 利用iscroll4实现轮播图效果实例代码

    前言 iscroll之所以会诞生,主要是因为无论是在以前的iphone.ipod.android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容.相信很多人和我一样,在使用iscroll的是时候只知道可以手动滑动,不知道iscroll的轮播怎么实现,那么以下就是我做的一个轮播效果,亲测有效: 一.html代码,当然可以动态添加下面的小圆点 <div id="wrapper"> <div id="scroller&qu

随机推荐