官网:
初始化设置
croe
Basic features
options.scrollY
scrollY true
可以自定义tap事件名
Scrollbars
‘clip':裁剪超出的滚动条
‘scale':按比例的收缩滚动条(占用cpu资源)
false:不收缩,
</td> <td valign="top" align="left"> <p>options.indicators</p> </td> <td valign="top" align="left"> <p>指示IScroll该如何滚动,Scrollbars的底层实现方式。</p> </td> <td valign="top" align="left"> </td> </tr> <tr> <td valign="top" align="left"> <p>options.indicators.el</p> </td> <td valign="top" align="left"> <p>制定滚动条的容器。容器中的第一个元素即为指示器。</p> <p>例如:</p> <p>indicators: {</p> <p>el: document.getElementById('indicator')</p> <p>}</p> <p>indicators: {</p> <p>el: '#indicator'</p> <p>}</p> </td> <td valign="top" align="left"> </td> </tr> <tr> <td valign="top" align="left"> <p>options.indicators.ignoreBoundaries</p> </td> <td valign="top" align="left"> <p>是否忽略容器边界。设为true 可以设置滚动速度</p> <p><a target="_blank" href="http://lab.cubiq.org/iscroll5/demos/parallax/">parallax demo</a></p> </td> <td valign="top" align="left"> <p>false</p> </td> </tr> <tr> <td valign="top" align="left"> <p>options.indicators.listenX</p> <p>options.indicators.listenY</p> </td> <td valign="top" align="left"> <p>指示器监听那个方向的滚动,可以设置为一个方向或2个方向</p> </td> <td valign="top" align="left"> <p>true</p> </td> </tr> <tr> <td valign="top" align="left"> <p>options.indicators.speedRatioX</p> <p>options.indicators.speedRatioY</p> </td> <td valign="top" align="left"> <p>指示器相对主滚动条的速度</p> </td> <td valign="top" align="left"> <p>0</p> </td> </tr> <tr> <td valign="top" align="left"> <p>options.indicators.fade</p> <p>options.indicators.interactive</p> <p>options.indicators.resize</p> <p>options.indicators.shrink</p> </td> <td valign="top" align="left"> <p>如scrollbars的设置</p> <p><a target="_blank" href="http://lab.cubiq.org/iscroll5/demos/minimap/">minimap demo</a></p> </td> <td valign="top" align="left"> </td> </tr> <tr> <td valign="top" align="left"> <p>options.probeType</p> </td> <td valign="top" align="left"> <p>需要使用iscroll-probe.js才能生效</p> <p>probeType:1 滚动不繁忙的时候触发</p> <p>probeType:2 滚动时每隔一定时间触发</p> <p>probeType:3 每滚动一像素触发一次</p> </td> <td valign="top" align="left"> </td> </tr> <tr> <td valign="top" align="left"> <p>分割<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>snap</p> </td> <td valign="top" align="left"> <p>options.snap</p> </td> <td valign="top" align="left"> <p><a href="https://www.jb51.cc/tag/zidong/" target="_blank" class="keywords">自动</a>分割容器,用于制作走马灯<a href="https://www.jb51.cc/tag/xiaoguo/" target="_blank" class="keywords">效果</a>等。</p> <p>Options.snap:true//根据容器尺寸<a href="https://www.jb51.cc/tag/zidong/" target="_blank" class="keywords">自动</a>分割</p> <p>Options.snap:el//根据元素分割</p> </td> <td valign="top" align="left"> <p>false</p> </td> </tr> <tr> <td valign="top" rowspan="5" align="left"> <p>缩放</p> <p>zoom</p> </td> <td valign="top" align="left"> <p>options.zoom</p> </td> <td valign="top" align="left"> <p>是否打开缩放</p> <p>最好使用iscroll-zoom.js</p> <p>如放大模糊,可将源容器定义为2倍大小,然后scale(0.5)</p> <p><a target="_blank" href="http://lab.cubiq.org/iscroll5/demos/zoom/">zoom demo</a></p> </td> <td valign="top" align="left"> <p>false</p> </td> </tr> <tr> <td valign="top" align="left"> <p>options.zoomMax</p> </td> <td valign="top" align="left"> <p>最大缩放等级</p> </td> <td valign="top" align="left"> <p>4</p> </td> </tr> <tr> <td valign="top" align="left"> <p>options.zoomMin</p> </td> <td valign="top" align="left"> <p>最小缩放等级</p> </td> <td valign="top" align="left"> <p>1</p> </td> </tr> <tr> <td valign="top" align="left"> <p>options.startZoom</p> </td> <td valign="top" align="left"> <p>初始缩放等级</p> </td> <td valign="top" align="left"> <p>1</p> </td> </tr> <tr> <td valign="top" align="left"> <p>options.wheelAction</p> </td> <td valign="top" align="left"> <p>滚轮动作</p> <p>设为'zoom',可以用滚轮缩放</p> </td> <td valign="top" align="left"> <p>undefined</p> </td> </tr> <tr> <td valign="top" rowspan="7" align="left"> <p>更多设置</p> </td> <td valign="top" align="left"> <p>options.bindToWrapper</p> </td> <td valign="top" align="left"> <p>光标、触摸超出容器时,是否停止滚动</p> </td> <td valign="top" align="left"> <p>false</p> </td> </tr> <tr> <td valign="top" align="left"> <p>options.bounceEasing</p> </td> <td valign="top" align="left"> <p>弹力动画效果</p> <p>预置效果:'quadratic','circular','back','bounce','elastic'(最后两个不能通过css3表现)</p> <p>还可以自定义效果</p> <p>bounceEasing: {</p> <p>style: 'cubic-bezier(0,1,1)',//css3时</p> <p>fn: function (k) { return k; }//不使用css3,使用requestAnimationFrame时</p> <p>}</p> </td> <td valign="top" align="left"> <p>'circular'</p> </td> </tr> <tr> <td valign="top" align="left"> <p>options.bounceTime</p> </td> <td valign="top" align="left"> <p>弹力动画持续的毫秒数</p> </td> <td valign="top" align="left"> <p>600</p> </td> </tr> <tr> <td valign="top" align="left"> <p>options.deceleration</p> </td> <td valign="top" align="left"> <p>滚动动量减速</p> <p>越大越快,建议不大于0.01</p> </td> <td valign="top" align="left"> <p>0.0006</p> </td> </tr> <tr> <td valign="top" align="left"> <p>options.mouseWheelSpeed</p> </td> <td valign="top" align="left"> <p>鼠标滚轮速度</p> </td> <td valign="top" align="left"> </td> </tr> <tr> <td valign="top" align="left"> <p>options.preventDefaultException</p> </td> <td valign="top" align="left"> <p>列出哪些元素不屏蔽默认事件;</p> </td> <td valign="top" align="left"> <p>{tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ }</p> </td> </tr> <tr> <td valign="top" align="left"> <p>options.resizePolling</p> </td> <td valign="top" align="left"> <p>重新调整窗口大小时,重新计算IScroll的时间间隔</p> </td> <td valign="top" align="left"> <p>60</p> </td> </tr> <tr> <td valign="top" align="left"> <p>键位绑定</p> </td> <td valign="top" align="left"> <p>options.keyBindings</p> </td> <td valign="top" align="left"> <p>监听按键事件控制IScroll</p> <p>例如:</p> <p>keyBindings: {</p> <p>pageUp: 33,</p> <p>pageDown: 34,</p> <p>end: 35,</p> <p>home: 36,</p> <p>left: 37,</p> <p>up: 38,</p> <p>right: 39,</p> <p>down: 40</p> <p>}</p> </td> <td valign="top" align="left"> </td> </tr> <tr> <td valign="top" align="left"> </td> <td valign="top" align="left"></td> <td valign="top" align="left"></td> <td valign="top" align="left"></td> </tr>
x:int
y:int
time:int
Easing: quadratic | circular | back | bounce | elastic
见IScroll.utils.ease 对象
例:
myScroll.scrollTo(0,-100,1000,IScroll.utils.ease.elastic);
</td> <td valign="top" align="left"> <p>scrollBy(x,easing)</p> </td> <td valign="top" align="left"> <p>滚动到相对于当前位置的某处</p> <p>其余同上</p> </td> </tr> <tr> <td valign="top" align="left"> </td> <td valign="top" align="left"> <p>scrollToElement(el,offsetX,offsetY,easing)</p> </td> <td valign="top" align="left"> <p>滚动到某个元素。el为必须的参数</p> <p>offsetX/offsetY:相对于el元素的位移。设为true即为屏幕中心</p> <p><a target="_blank" href="http://lab.cubiq.org/iscroll5/demos/scroll-to-element/">scroll to element</a></p> </td> </tr> <tr> <td valign="top" rowspan="2" align="left"> <p>分割<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>snap</p> </td> <td valign="top" align="left"> <p>goToPage(x,easing)</p> </td> <td valign="top" align="left"> <p>根据options.snap分割<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>,<a href="https://www.jb51.cc/tag/tiaozhuan/" target="_blank" class="keywords">跳转</a>到横向、纵向某页。XY可以同时生效。</p> <p>结合options.snap使用</p> </td> </tr> <tr> <td valign="top" align="left"> <p>next()</p> <p>prev()</p> </td> <td valign="top" align="left"> <p><a href="https://www.jb51.cc/tag/shangyiye/" target="_blank" class="keywords">上一页</a>,<a href="https://www.jb51.cc/tag/xiayiye/" target="_blank" class="keywords">下一页</a></p> <p>结合options.snap使用</p> </td> </tr> <tr> <td valign="top" align="left"> <p>缩放</p> </td> <td valign="top" align="left"> <p>zoom(scale,x,time)</p> </td> <td valign="top" align="left"> <p>缩放容器</p> <p>Scale:缩放因子</p> </td> </tr> <tr> <td valign="top" align="left"> <p>刷新</p> </td> <td valign="top" align="left"> <p>refresh()</p> </td> <td valign="top" align="left"> <p>刷新IScroll</p> </td> </tr> <tr> <td valign="top" align="left"> <p>销毁</p> </td> <td valign="top" align="left"> <p>destroy()</p> </td> <td valign="top" align="left"> <p>销毁IScroll,节省资源</p> </td> </tr> <tr> <td valign="top" align="left"></td> <td valign="top" align="left"></td> <td valign="top" align="left"></td> </tr>
</td> </tr>