Iscroll应用文档

摘要:
Iscroll是一个非常好的区域滑块插件。顾名思义,Iscroll提供的调用方法destroy用于销毁实例化的Iscroll实例,包括所有以前绑定的Iscroll事件。scrollToElement方法实际上是scrollTo的进一步封装。它接受两个参数:el是滚动到的元素引用,time是滚动时间。ScrollToPage此方法接受三个参数。当滚动内容的高度和宽度大于滚动范围时,iscroll将自动翻页,然后您可以使用scrollToPage方法滚动到页面。当然,当hsroll为false时,您不能向左或向右滚动。

Iscroll是一个非常不错的区域滑动插件。

不过它有个小小的不足,就是它的说明文档。

全英文不说,整理的也不咋好,官网上看着很乱,不容易查阅。

因此上网找了一些相关的文档说明并加以整理。

Iscroll 提供的调用方法

destroy 
顾名思义,是用来销毁你实例化的iScroll 实例,包括之前绑定的所有iscroll 事件。 

refresh 
这个方法非常有用,当你的滚动区域的内容发生改变 或是 滚动区域不正确,都用通过调用refresh 来使得iscroll 重新计算滚动的区域,包括滚动条,来使得iscroll 适合当前的dom。 

scrollTo 
这个方法接受4个参数 xytimerelative x 为移动的x轴坐标,y为移动的y轴坐标, time为移动时间,relative表示是否相对当前位置。 

scrollToElement 
这个方法实际上是对scrollTo的进一步封装,接受两个参数(el,time),el为需要滚动到的元素引用,time为滚动时间。 

scrollToPage 
此方法接受三个参数(pageX,pageY,time) 当滚动内容的高宽大于滚动范围时,iscroll 会自动分页,然后就能使用scrollToPage方法滚动到页面。当然,当hscroll 为false 的时候,不能左右滚动。pageX这个参数就失去效果 

disable 
调用这个方法会立即停止动画滚动,并且把滚动位置还原成0,取消绑定touchmove, touchend、touchcancel事件。 

enable 
调用这个方法,使得iscroll恢复默认正常状态 

stop 
立即停止动画 

zoom 
改变内容的大小倍数,此方法接受4个参数,x,y,scale,time 分别表示的意思为,放大的基准坐标,以及放大倍数,动画时间 

isReady 
当iscroll 没有处于正在滚动,没有移动过,没有改变大小时,此值为true

Iscroll 的初始化属性

hScroll: true, //是否水平滚动
vScroll: true, //是否垂直滚动
x: 0, //滚动水平初始位置
y: 0, //滚动垂直初始位置
snap: true, //值可以为true或是DOM元素的tagname,当为true时,对齐的坐标会根据可滚动的位置和滚动区域计算得到可滑动几页,如果为tagname,则滑动会对齐到元素上
bounce: true, //是否超过实际位置反弹
bounceLock: false, //当内容少于滚动是否可以反弹,这个实际用处不大
momentum: true, //动量效果,拖动惯性
lockDirection: true, //当水平滚动和垂直滚动同时生效时,当拖动开始是否锁定另一边的拖动
useTransform: true, //是否使用CSS形变
useTransition: false, //是否使用CSS变换
topOffset: 0, //已经滚动的基准值(一般情况用不到)
checkDOMChanges: false, //是否自动检测内容变化(这个检测不是很准)

//Scrollbar相关参数,通过scrollbar这些参数可以配置iscroll的滚动条,通过scrollbarClass可以自己定义一套滚动条的样式。
hScrollbar: true, //是否显示水平滚动条
vScrollbar: true, //同上垂直滚动条
fixedScrollbar: isAndroid, //对andriod的fixed
hideScrollbar: isIDevice, //是否隐藏滚动条
fadeScrollbar: isIDevice && has3d, //滚动条是否渐隐渐显
scrollbarClass: '', //自定义滚动条的样式名

//Zoom放大相关的参数,通过它,对于一个固定显示图片区域的类似应用,可以非常简单的做到固定滚动,包括两指放大的应用。
zoom: false, //默认是否放大
zoomMin: 1, //放大的最小倍数
zoomMax: 4, //最大倍数
doubleTapZoom: 2, //双触放大几倍
wheelAction: 'scroll', //鼠标滚动行为(还可以是zoom)

//自定义Events相关参数 
onRefresh: null, //refresh 的回调,关于自身何时调用refresh 后面会继续谈到
onBeforeScrollStart: function(e){ e.preventDefault(); }, //开始滚动前的时间回调,默认是阻止浏览器默认行为
onScrollStart: null, //开始滚动的回调
onBeforeScrollMove: null, //在内容移动前的回调
onScrollMove: null, //内容移动的回调
onBeforeScrollEnd: null, //在滚动结束前的回调
onScrollEnd: null, //在滚动完成后的回调
onTouchEnd: null, //手离开屏幕后的回调
onDestroy: null, //销毁实例的回调
onZoomStart: null, //开始放大前的回调
onZoom: null, //放大的回调
onZoomEnd: null //放大完成后的回调

免责声明:文章转载自《Iscroll应用文档》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇UML各种图总结UE4_简易AI_基础移动下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

H5手机开发锁定表头和首列(惯性滚动)解决方案

前端时间移动端在做表格的时候需要这个功能,由于还有实现类似原生的惯性滚动功能,于是使用了iscroll插件。 iscroll插件下载地址:iscroll5 该功能demo github地址:https://github.com/lyc152/front-special-effects/tree/master/table-fixed 下面看下代码结构: HT...

移动端H5页面遇到的问题总结

 最近刚做完一个移动端的项目,产品之无敌,过程之艰辛,我就不多说了,记录下在这个项目中遇到的问题,以防万一,虽然这些可能都是已经被N多前辈解决掉了的问题,也放在这里,算是为自己漫漫前端路铺了一颗小石子儿吧,也在文末留下自己未能解决的疑问,希望看到的朋友能解惑。   都知道做移动端的开发,在电脑上调试好了的东西,放在手机里可能真的秒秒钟就炸了,我发誓绝对没...

移动端web页面使用position:fixed问题总结

近期完成了一个新的项目(搜狐直播),其中又涉及到了 fixed(固定位置定位)的问题,在之前的文章《移动Web产品前端开发口诀——“快”》中已经阐述过我对 iScroll 的态度,所以在这个项目中我决定不使用 iScroll,使用 position:fixed 实现头部、底部模块定位。在使用fixed的过程中,遇到了一些的问题,并且部分问题无法找到较好的解...

H5基于iScroll实现下拉刷新,上拉加载更多

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

iScroll框架的使用和修改

引用 http://www.cnblogs.com/JoannaQ/p/3155873.html iScroll框架的使用和修改 iScroll 的诞生是因为手机 Webkit 浏览器(iPhone、iPod、Android 和 Pre)本身没有为固定宽度和高度的元素提供滚动内容的方法。这导致了很多网页使用 position:absolute 无法固定页...