IScroll5中文API整理,用法与参考
IScroll是移動頁面上被使用的一款仿系統(tǒng)滾動插件。IScroll5相對于之前的IScroll4改進(jìn)了許多，使得大家可以更方便的定制所需的功能了。
做項(xiàng)目的時候正好用到了這個插件，自己做了一下總結(jié)，發(fā)在這里方便大家學(xué)習(xí)IScroll5。
官網(wǎng)：http://iscrolljs.com/
IScroll最簡單的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 | 是否啟用彈力動畫效果，關(guān)掉可以加速 | true | |
| 基礎(chǔ)特性 Basic?features | options.click | 是否啟用click事件。建議關(guān)閉此選項(xiàng)并啟用自定義的tap事件（options.tap） | false |
| options.disableMouse | 是否關(guān)閉鼠標(biāo)事件探測。如知道運(yùn)行在哪個平臺，可以開啟它來加速。 | false | |
| options.disablePointer | 是否關(guān)閉指針事件探測。如知道運(yùn)行在哪個平臺，可以開啟它來加速。 | false | |
| options.disableTouch | 是否關(guān)閉觸摸事件探測。如知道運(yùn)行在哪個平臺，可以開啟它來加速。 | false | |
| options.eventPassthrough | 使用IScroll的橫軸滾動時，如想使用系統(tǒng)立軸滾動并在橫軸上生效，請開啟。 event?passthrough?demo | false | |
| options.freeScroll | 主要在上下左右滾動都生效時使用，可以向任意方向滾動。 2D?scroll?demo | false | |
| options.keyBindings | 綁定按鍵事件。 Key?bindings? | false | |
| options.invertWheelDirection | 反向鼠標(biāo)滾輪。 | false | |
| options.momentum | 是否開啟動量動畫，關(guān)閉可以提升效率。 | true | |
| options.mouseWheel | 是否監(jiān)聽鼠標(biāo)滾輪事件。 | false | |
| options.preventDefault | 是否屏蔽默認(rèn)事件。 | true | |
| options.scrollbars | 是否顯示默認(rèn)滾動條 | false | |
| options.scrollX options.scrollY | 可以設(shè)置是否顯示橫向或縱向滾動條 | scrollX ?false scrollY ?true | |
| options.tap | 是否啟用自定義的tap事件 可以自定義tap事件名 | false | |
| 滾動條 Scrollbars | options.scrollbars | 是否顯示默認(rèn)滾動條 | false |
| options.fadeScrollbars | 是否漸隱滾動條，關(guān)掉可以加速 | true | |
| options.interactiveScrollbars | 用戶是否可以拖動滾動條 | false | |
| options.resizeScrollbars | 是否固定滾動條大小，建議自定義滾動條時可開啟。 | false | |
| options.shrinkScrollbars | 滾動超出滾動邊界時，是否收縮滾動條。 ‘clip’：裁剪超出的滾動條 ‘scale’:按比例的收縮滾動條（占用CPU資源） false:不收縮， | false | |
| ? | options.indicators | 指示IScroll該如何滾動，Scrollbars的底層實(shí)現(xiàn)方式。 | ? |
| options.indicators.el | 制定滾動條的容器。容器中的第一個元素即為指示器。 例如： indicators:?{ ????el:?document.getElementById('indicator') } indicators:?{ ????el:?'#indicator' } | ? | |
| options.indicators.ignoreBoundaries | 是否忽略容器邊界。設(shè)為true?可以設(shè)置滾動速度 parallax?demo | false | |
| options.indicators.listenX options.indicators.listenY | 指示器監(jiān)聽那個方向的滾動，可以設(shè)置為一個方向或2個方向 | true | |
| options.indicators.speedRatioX options.indicators.speedRatioY | 指示器相對主滾動條的速度 | 0 | |
| options.indicators.fade options.indicators.interactive options.indicators.resize options.indicators.shrink | 如scrollbars的設(shè)置 minimap?demo | ? | |
| options.probeType | 需要使用iscroll-probe.js才能生效 probeType：1??滾動不繁忙的時候觸發(fā) probeType：2??滾動時每隔一定時間觸發(fā) probeType：3??每滾動一像素觸發(fā)一次 | ? | |
| 分割頁面snap | options.snap | 自動分割容器，用于制作走馬燈效果等。 Options.snap:true//根據(jù)容器尺寸自動分割 Options.snap:el//根據(jù)元素分割 | 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 | 滾輪動作 設(shè)為’zoom’，可以用滾輪縮放 | undefined | |
| 更多設(shè)置 | options.bindToWrapper | 光標(biāo)、觸摸超出容器時，是否停止?jié)L動 | false |
| options.bounceEasing | 彈力動畫效果 預(yù)置效果：'quadratic',?'circular',?'back',?'bounce',?'elastic'（最后兩個不能通過css3表現(xiàn)） 還可以自定義效果 bounceEasing:?{ ????style:?'cubic-bezier(0,0,1,1)',//css3時 ????fn:?function?(k)?{?return?k;?}//不使用css3，使用requestAnimationFrame時 } | 'circular' | |
| options.bounceTime | 彈力動畫持續(xù)的毫秒數(shù) | 600 | |
| options.deceleration | 滾動動量減速 越大越快，建議不大于0.01 | 0.0006 | |
| options.mouseWheelSpeed | 鼠標(biāo)滾輪速度 | ? | |
| options.preventDefaultException | 列出哪些元素不屏蔽默認(rèn)事件； | {tagName:?/^(INPUT|TEXTAREA|BUTTON|SELECT)$/?} | |
| options.resizePolling | 重新調(diào)整窗口大小時，重新計(jì)算IScroll的時間間隔 | 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：
| 所屬 | 方法名 | 說明 |
| 滾動 | 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) | 滾動到相對于當(dāng)前位置的某處 其余同上 |
| ? | scrollToElement(el,?time,?offsetX,?offsetY,?easing) | 滾動到某個元素。el為必須的參數(shù) offsetX/offsetY：相對于el元素的位移。設(shè)為true即為屏幕中心 scroll?to?element |
| 分割頁面snap | goToPage(x,?y,?time,?easing) | 根據(jù)options.snap分割頁面，跳轉(zhuǎn)到橫向、縱向某頁。XY可以同時生效。 結(jié)合options.snap使用 |
| next() prev() | 上一頁，下一頁 結(jié)合options.snap使用 | |
| 縮放 | zoom(scale,?x,?y,?time) | 縮放容器 Scale:縮放因子 |
| 刷新 | refresh() | 刷新IScroll |
| 銷毀 | destroy() | 銷毀IScroll，節(jié)省資源 |
| ? | ? | ? |
?
IScroll的事件
事件使用實(shí)例：
myScroll = new IScroll('#wrapper'); myScroll.on('scrollEnd', doSomething);?
| beforeScrollStart | 用戶點(diǎn)擊屏幕，但是還未初始化滾動前 |
| scrollCancel | 初始化滾動后又取消 |
| scrollStart | 開始滾動 |
| scroll | 滾動中 |
| scrollEnd | 滾動結(jié)束 |
| flick | 輕擊屏幕左、右 |
| zoomStart | 開始縮放 |
| zoomEnd | 縮放結(jié)束 |
?
IScroll的屬性
| myScroll.x/y | 當(dāng)前位置 |
| myScroll.directionX/Y | 上一次的滾動方向(-1?下/右,?0?保持原狀,?1?上/左) |
| myScroll.currentPage | 當(dāng)前Snap信息 |
| myScroll.maxScrollXmyScroll.maxScrollY | 當(dāng)滾動到底部時的?myScroll.x/y ? |
轉(zhuǎn)載于:https://www.cnblogs.com/jiangxiaobo/p/5753410.html
總結(jié)
以上是生活随笔為你收集整理的IScroll5中文API整理,用法与参考的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HUD2795 线段树（单点更新）
- 下一篇： ECC椭圆曲线加密算法—加解密（Sage