快捷導(dǎo)航

IScroll5 中文API參數(shù)說明和調(diào)用方法

更新時(shí)間：2016年05月21日 11:09:26 作者：無賴君子

IScroll是移動(dòng)頁面上被使用的一款仿系統(tǒng)滾動(dòng)插件。IScroll5相對(duì)于之前的IScroll4改進(jìn)了許多，使得大家可以更方便的定制所需的功能了。

IScroll最簡(jiǎn)單的DOM結(jié)構(gòu):

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

初始化iscroll

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

初始化設(shè)置

初始化設(shè)置使用實(shí)例：

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

設(shè)置列表：

所屬	屬性名	說明	默認(rèn)值
核心庫 croe	options.useTransform	是否使用CSS3的Transform屬性	true
	options.useTransition	是否使用CSS3的Transition屬性，否則使用requestAnimationFram代替	true
	options.HWCompositing	是否啟用硬件加速	true
	options.bounce	是否啟用彈力動(dòng)畫效果，關(guān)掉可以加速	true
基礎(chǔ)特性 Basic features	options.click	是否啟用click事件。建議關(guān)閉此選項(xiàng)并啟用自定義的tap事件（options.tap）	false
	options.disableMouse	是否關(guān)閉鼠標(biāo)事件探測(cè)。如知道運(yùn)行在哪個(gè)平臺(tái)，可以開啟它來加速。	false
	options.disablePointer	是否關(guān)閉指針事件探測(cè)。如知道運(yùn)行在哪個(gè)平臺(tái)，可以開啟它來加速。	false
	options.disableTouch	是否關(guān)閉觸摸事件探測(cè)。如知道運(yùn)行在哪個(gè)平臺(tái)，可以開啟它來加速。	false
	options.eventPassthrough	使用IScroll的橫軸滾動(dòng)時(shí)，如想使用系統(tǒng)立軸滾動(dòng)并在橫軸上生效，請(qǐng)開啟。 event passthrough demo	false
	options.freeScroll	主要在上下左右滾動(dòng)都生效時(shí)使用，可以向任意方向滾動(dòng)。 2D scroll demo	false
	options.keyBindings	綁定按鍵事件。 Key bindings	false
	options.invertWheelDirection	反向鼠標(biāo)滾輪。	false
	options.momentum	是否開啟動(dòng)量動(dòng)畫，關(guān)閉可以提升效率。	true
	options.mouseWheel	是否監(jiān)聽鼠標(biāo)滾輪事件。	false
	options.preventDefault	是否屏蔽默認(rèn)事件。	true
	options.scrollbars	是否顯示默認(rèn)滾動(dòng)條	false
	options.scrollX options.scrollY	可以設(shè)置是否顯示橫向或縱向滾動(dòng)條	scrollX false scrollY true
	options.tap	是否啟用自定義的tap事件可以自定義tap事件名	false
滾動(dòng)條 Scrollbars	options.scrollbars	是否顯示默認(rèn)滾動(dòng)條	false
	options.fadeScrollbars	是否漸隱滾動(dòng)條，關(guān)掉可以加速	true
	options.interactiveScrollbars	用戶是否可以拖動(dòng)滾動(dòng)條	false
	options.resizeScrollbars	是否固定滾動(dòng)條大小，建議自定義滾動(dòng)條時(shí)可開啟。	false
	options.shrinkScrollbars	滾動(dòng)超出滾動(dòng)邊界時(shí)，是否收縮滾動(dòng)條。 ‘clip'：裁剪超出的滾動(dòng)條 ‘scale':按比例的收縮滾動(dòng)條（占用CPU資源） false:不收縮，	false
	options.indicators	指示IScroll該如何滾動(dòng)，Scrollbars的底層實(shí)現(xiàn)方式。
	options.indicators.el	制定滾動(dòng)條的容器。容器中的第一個(gè)元素即為指示器。例如： indicators: { el: document.getElementById('indicator') } indicators: { el: '#indicator' }
	options.indicators.ignoreBoundaries	是否忽略容器邊界。設(shè)為true 可以設(shè)置滾動(dòng)速度 parallax demo	false
	options.indicators.listenX options.indicators.listenY	指示器監(jiān)聽那個(gè)方向的滾動(dòng)，可以設(shè)置為一個(gè)方向或2個(gè)方向	true
	options.indicators.speedRatioX options.indicators.speedRatioY	指示器相對(duì)主滾動(dòng)條的速度	0
	options.indicators.fade options.indicators.interactive options.indicators.resize options.indicators.shrink	如scrollbars的設(shè)置 minimap demo
	options.probeType	需要使用iscroll-probe.js才能生效 probeType：1 滾動(dòng)不繁忙的時(shí)候觸發(fā) probeType：2 滾動(dòng)時(shí)每隔一定時(shí)間觸發(fā) probeType：3 每滾動(dòng)一像素觸發(fā)一次
分割頁面snap	options.snap	自動(dòng)分割容器，用于制作走馬燈效果等。 Options.snap:true//根據(jù)容器尺寸自動(dòng)分割 Options.snap:el//根據(jù)元素分割	false
縮放 zoom	options.zoom	是否打開縮放最好使用iscroll-zoom.js 如放大模糊，可將源容器定義為2倍大小，然后scale(0.5) zoom demo	false
	options.zoomMax	最大縮放等級(jí)	4
	options.zoomMin	最小縮放等級(jí)	1
	options.startZoom	初始縮放等級(jí)	1
	options.wheelAction	滾輪動(dòng)作設(shè)為'zoom'，可以用滾輪縮放	undefined
更多設(shè)置	options.bindToWrapper	光標(biāo)、觸摸超出容器時(shí)，是否停止?jié)L動(dòng)	false
	options.bounceEasing	彈力動(dòng)畫效果預(yù)置效果：'quadratic', 'circular', 'back', 'bounce', 'elastic'（最后兩個(gè)不能通過css3表現(xiàn)）還可以自定義效果 bounceEasing: { style: 'cubic-bezier(0,0,1,1)',//css3時(shí) fn: function (k) { return k; }//不使用css3，使用requestAnimationFrame時(shí) }	'circular'
	options.bounceTime	彈力動(dòng)畫持續(xù)的毫秒數(shù)	600
	options.deceleration	滾動(dòng)動(dòng)量減速越大越快，建議不大于0.01	0.0006
	options.mouseWheelSpeed	鼠標(biāo)滾輪速度
	options.preventDefaultException	列出哪些元素不屏蔽默認(rèn)事件；	{tagName: /^(INPUT\|TEXTAREA\|BUTTON\|SELECT)$/ }
	options.resizePolling	重新調(diào)整窗口大小時(shí)，重新計(jì)算IScroll的時(shí)間間隔	60
鍵位綁定	options.keyBindings	監(jiān)聽按鍵事件控制IScroll 例如： keyBindings: { pageUp: 33, pageDown: 34, end: 35, home: 36, left: 37, up: 38, right: 39, down: 40 }

IScroll5的API：

所屬	方法名	說明
滾動(dòng)	scrollTo(x, y, time, easing)	滾動(dòng)到：x，y，事件，easing方式 x:int y:int time:int Easing: quadratic \| circular \| back \| bounce \| elastic 見IScroll.utils.ease 對(duì)象例： myScroll.scrollTo(0, -100, 1000, IScroll.utils.ease.elastic);
	scrollBy(x, y, time, easing)	滾動(dòng)到相對(duì)于當(dāng)前位置的某處其余同上
	scrollToElement(el, time, offsetX, offsetY, easing)	滾動(dòng)到某個(gè)元素。el為必須的參數(shù) offsetX/offsetY：相對(duì)于el元素的位移。設(shè)為true即為屏幕中心 scroll to element
分割頁面snap	goToPage(x, y, time, easing)	根據(jù)options.snap分割頁面，跳轉(zhuǎn)到橫向、縱向某頁。XY可以同時(shí)生效。結(jié)合options.snap使用
分割頁面snap	next() prev()	上一頁，下一頁結(jié)合options.snap使用
縮放	zoom(scale, x, y, time)	縮放容器 Scale:縮放因子
刷新	refresh()	刷新IScroll
銷毀	destroy()	銷毀IScroll，節(jié)省資源

IScroll的事件：

beforeScrollStart	用戶點(diǎn)擊屏幕，但是還未初始化滾動(dòng)前
scrollCancel	初始化滾動(dòng)后又取消
scrollStart	開始滾動(dòng)
scroll	滾動(dòng)中
scrollEnd	滾動(dòng)結(jié)束
flick	輕擊屏幕左、右
zoomStart	開始縮放
zoomEnd	縮放結(jié)束

事件使用實(shí)例：

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

IScroll的屬性：

myScroll.x/y	當(dāng)前位置
myScroll.directionX/Y	上一次的滾動(dòng)方向(-1 下/右, 0 保持原狀, 1 上/左)
myScroll.currentPage	當(dāng)前Snap信息
myScroll.maxScrollXmyScroll.maxScrollY	當(dāng)滾動(dòng)到底部時(shí)的 myScroll.x/y

myScroll.x/y

當(dāng)前位置

myScroll.directionX/Y

上一次的滾動(dòng)方向(-1 下/右, 0 保持原狀, 1 上/左)

myScroll.currentPage

當(dāng)前Snap信息

myScroll.maxScrollXmyScroll.maxScrollY

當(dāng)滾動(dòng)到底部時(shí)的 myScroll.x/y

您可能感興趣的文章: