日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

IScroll5中文API整理,用法与参考

發布時間:2023/12/13 编程问答 30 豆豆
生活随笔 收集整理的這篇文章主要介紹了 IScroll5中文API整理,用法与参考 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

IScroll是移動頁面上被使用的一款仿系統滾動插件。IScroll5相對于之前的IScroll4改進了許多,使得大家可以更方便的定制所需的功能了。

做項目的時候正好用到了這個插件,自己做了一下總結,發在這里方便大家學習IScroll5。

官網: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的事件

事件使用實例:

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

?

beforeScrollStart

用戶點擊屏幕,但是還未初始化滾動前

scrollCancel

初始化滾動后又取消

scrollStart

開始滾動

scroll

滾動中

scrollEnd

滾動結束

flick

輕擊屏幕左、右

zoomStart

開始縮放

zoomEnd

縮放結束

?

IScroll的屬性

myScroll.x/y

當前位置

myScroll.directionX/Y

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

myScroll.currentPage

當前Snap信息

myScroll.maxScrollXmyScroll.maxScrollY

當滾動到底部時的?myScroll.x/y

?

轉載于:https://www.cnblogs.com/jiangxiaobo/p/5753410.html

總結

以上是生活随笔為你收集整理的IScroll5中文API整理,用法与参考的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。