成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JS進(jìn)階篇--iscroll.js的使用

Genng / 1281人閱讀

摘要:最好給瀏覽器或者毫秒的間隙再去初始化。他們控制滾動(dòng)周期毫秒級(jí)別和動(dòng)畫的擦除效果。重新繪制階段不是瞬時(shí)發(fā)生的只是范圍結(jié)束時(shí)觸發(fā)。注如果你有一個(gè)相當(dāng)復(fù)雜的結(jié)構(gòu),你應(yīng)該給瀏覽器更多的執(zhí)行事件,可以設(shè)置到毫秒的超時(shí)時(shí)間。使用方法注冊(cè)事件。

入門

Scroll是一個(gè)類,每個(gè)需要使用滾動(dòng)功能的區(qū)域均要進(jìn)行初始化。每個(gè)頁(yè)面上的iScroll實(shí)例數(shù)目在設(shè)備的CPU和內(nèi)存能承受的范圍內(nèi)是沒有限制的。

盡可能保持DOM結(jié)構(gòu)的簡(jiǎn)潔。iScroll使用硬件合成層但是有一個(gè)限制硬件可以處理的元素。
最佳的HTML結(jié)構(gòu)如下:

  • ...
  • ...
  • ...

iScroll作用于滾動(dòng)區(qū)域的外層。在上面的例子中,UL元素能進(jìn)行滾動(dòng)。只有容器元素的第一個(gè)子元素能進(jìn)行滾動(dòng),其他子元素完全被忽略。

最基本的腳本初始化的方式如下:



第一個(gè)參數(shù)可以是滾動(dòng)容器元素的DOM選擇器字符串,也可以是滾動(dòng)容器元素的引用對(duì)象。下面是一個(gè)有效的語(yǔ)法:

var wrapper = document.getElementById("wrapper");
var myScroll = new IScroll(wrapper);

所以基本上你要么直接傳遞元素,要么傳遞一個(gè)querySelector字符串。因此可以使用css名稱代替ID去選擇一個(gè)滾動(dòng)器容器,如下:

var myScroll = new IScroll(".wrapper");

注意,iScroll使用的是querySelector 而不是 querySelectorAll,所以iScroll只會(huì)作用到選擇器選中元素的第一個(gè)。如果你需要對(duì)多個(gè)對(duì)象使用iScroll,你需要構(gòu)建自己的循環(huán)機(jī)制。

初始化

當(dāng)DOM準(zhǔn)備完成后iScroll需要被初始化。最保險(xiǎn)的方式是在window的onload事件中啟動(dòng)它。
DOMContentLoaded事件中或者inline initialization中做也可以,需要記住的是腳本需要知道滾動(dòng)區(qū)域的高度和寬度。如果你有一些圖片在滾動(dòng)區(qū)域?qū)е虏荒芰ⅠR獲取區(qū)域的高度和寬度,iScroll的滾動(dòng)尺寸有可能會(huì)錯(cuò)誤

為滾動(dòng)起容器增加position:relative或者absolute樣式。這將解決大多數(shù)滾動(dòng)器容器大小計(jì)算不正確的問題。
綜上所述,最小的iScroll配置如下:


    ...
    
    
    
    ...
    
    
  • ...
  • ...
  • ...

注:如果你有一個(gè)復(fù)雜的DOM結(jié)構(gòu),最好在onload事件之后適當(dāng)?shù)难舆t,再去初始化iScroll。最好給瀏覽器100或者200毫秒的間隙再去初始化iScroll。

參數(shù)配置

在iScroll初始化階段可以通過構(gòu)造函數(shù)的第二個(gè)參數(shù)配置它。

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

上面的例子示例了在iScroll初始化時(shí)開啟鼠標(biāo)滾輪支持和滾動(dòng)條支持。

理解核心

iScroll使用基于設(shè)備和瀏覽器性能的各種技術(shù)來(lái)進(jìn)行滾動(dòng)。通常不需要你來(lái)配置引擎,iScroll會(huì)為你選擇最佳的方式。

盡管如此,理解iScroll工作機(jī)制和了解如何去配置他們也是很重要的。

options.useTransform

默認(rèn)情況下引擎會(huì)使用CSStransform屬性。如果現(xiàn)在還是2007年,那么可以設(shè)置這個(gè)屬性為false,這就是說:引擎將使用top/left屬性來(lái)進(jìn)行滾動(dòng)。
這個(gè)屬性在滾動(dòng)器感知到Flash,iframe或者視頻插件內(nèi)容時(shí)會(huì)有用,但是需要注意:性能會(huì)有極大的損耗。
默認(rèn)值:true

options.useTransition

iScroll使用CSS transition來(lái)實(shí)現(xiàn)動(dòng)畫效果(動(dòng)量和彈力)。如果設(shè)置為false,那么將使用requestAnimationFrame代替。
在現(xiàn)在瀏覽器中這兩者之間的差異并不明顯。在老的設(shè)備上transitions執(zhí)行得更好。默認(rèn)值:true

options.HWCompositing

這個(gè)選項(xiàng)嘗試使用translateZ(0)來(lái)把滾動(dòng)器附加到硬件層,以此來(lái)改變CSS屬性。在移動(dòng)設(shè)備上這將提高性能,但在有些情況下,你可能想要禁用它(特別是如果你有太多的元素和硬件性能跟不上)。
默認(rèn)值:true

注:如果不確定iScroll的最優(yōu)配置。從性能角度出發(fā),上面的所有選項(xiàng)應(yīng)該設(shè)置為true。(或者更好的方式,讓他們自動(dòng)設(shè)置屬性為true)。你可以嘗試這配置他們,但是要小心內(nèi)存泄漏。

滾動(dòng)條

滾動(dòng)條不只是像名字所表達(dá)的意義一樣,在內(nèi)部它們是作為indicators的引用。

一個(gè)指示器偵聽滾動(dòng)條的位置并且現(xiàn)實(shí)它在全局中的位置,但是它可以做更多的事情。
先從最基本的開始。

options.scrollbars

正如我們?cè)诨竟δ芙榻B中提到的,激活滾動(dòng)條只需要做一件事情,這件事情就是:

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

當(dāng)然這個(gè)默認(rèn)的行為是可以定制的。

滾動(dòng)的編程接口

當(dāng)然還可以通過編程來(lái)進(jìn)行滾動(dòng)。

scrollTo(x, y, time, easing)

對(duì)應(yīng)存在的一個(gè)叫做myScroll的iScroll實(shí)例,可以通過下面的方式滾動(dòng)到任意的位置:

myScroll.scrollTo(0, -100);

通過上面的方式將向下滾動(dòng)100個(gè)像素。記?。?永遠(yuǎn)是左上角。需要滾動(dòng)你必須傳遞負(fù)數(shù)。
time 和 easing是可選項(xiàng)。他們控制滾動(dòng)周期(毫秒級(jí)別)和動(dòng)畫的擦除效果。
擦除功能是一個(gè)有效的IScroll.utils.ease對(duì)象。例如應(yīng)用一個(gè)一秒的經(jīng)典擦除動(dòng)畫你應(yīng)該這么做:

myScroll.scrollTo(0, -100, 1000, IScroll.utils.ease.elastic);

擦除動(dòng)畫的類型選項(xiàng)有:quadratic, circular, back, bounce, elastic。

scrollBy(x, y, time, easing)

和上面一個(gè)方法類似,但是可以傳遞X和Y的值從當(dāng)前位置進(jìn)行滾動(dòng)。

myScroll.scrollBy(0, -10);

上面這個(gè)語(yǔ)句將在當(dāng)前位置向下滾動(dòng)10個(gè)像素。如果你當(dāng)前所在位置為-100,那么滾動(dòng)結(jié)束后位置為-110.

scrollToElement(el, time, offsetX, offsetY, easing)

這是一個(gè)很有用的方法,你會(huì)喜歡它的。
在這個(gè)方法中只有一個(gè)強(qiáng)制的參數(shù)就是el。傳遞一個(gè)元素或者一個(gè)選擇器,iScroll將嘗試滾動(dòng)到這個(gè)元素的左上角位置。
time是可選項(xiàng),用于設(shè)置動(dòng)畫周期。
offsetX 和 offsetY定義像素級(jí)的偏移量,所以你可以滾動(dòng)到元素并且加上特別的偏移量。但并不僅限于此。如果把這兩個(gè)參數(shù)設(shè)置為true,元素將會(huì)位于屏幕的中間。
easing參數(shù)和scrollTo方法里的一樣。

對(duì)齊

iScroll能對(duì)齊到固定的位置和元素。

options.snap

最簡(jiǎn)單的對(duì)齊配置如下:

var myScroll = new IScroll("#wrapper", {
    snap: true
});

這將按照頁(yè)面容器的大小自動(dòng)分割滾動(dòng)條。
snap屬性也可以傳遞字符類型類型的值。這個(gè)值是滾動(dòng)條將要對(duì)齊到的元素的選擇器。比如下面:

var myScroll = new IScroll("#wrapper", {
    snap: "li"
});

這個(gè)示例中滾動(dòng)條將會(huì)對(duì)齊到每一個(gè)LI標(biāo)記的元素。
下面將幫助你快速瀏覽iScroll提供的關(guān)于對(duì)齊的一系列有趣的方法。

goToPage(x, y, time, easing)

x 和 y呈現(xiàn)你想滾動(dòng)到橫向軸或者縱向軸的頁(yè)面數(shù)。如果你需要在單個(gè)唯獨(dú)上使用滾動(dòng)條,只需要為你不需要的軸向傳遞0值。
time屬性是動(dòng)畫周期,easing屬性是滾動(dòng)到指定點(diǎn)使用的擦除功能類型。請(qǐng)參考高級(jí)功能中的option.bounceEasing。這兩個(gè)屬性都是可選項(xiàng)。

myScroll.goToPage(10, 0, 1000);
上面這個(gè)例子將在一秒內(nèi)沿著橫向滾動(dòng)到第10頁(yè)。

next()

prev()

滾動(dòng)到當(dāng)前位置的下一頁(yè)或者前一頁(yè)。

縮放

為了使用縮放功能,你最好使用iscroll-zoom.js腳本。
和前面的示例一樣,一個(gè)好的縮放功能的配置如下:

myScroll = new IScroll("#wrapper", {
    zoom: true,
    mouseWheel: true,
    wheelAction: "zoom"
});

刷新

iScroll需要知道包裝器和滾動(dòng)器確切的尺寸,在iScroll初始化的時(shí)候進(jìn)行計(jì)算,如果元素大小發(fā)生了變化,需要告訴iScroll DOM發(fā)生了變化。
下面將提供調(diào)用refresh方法的正確時(shí)機(jī)。

每次觸摸DOM,瀏覽器渲染器重繪頁(yè)面。一旦發(fā)生了重畫我們可以安全地讀新的DOM屬性。重新繪制階段不是瞬時(shí)發(fā)生的只是范圍結(jié)束時(shí)觸發(fā)。這就是為什么我們需要給渲染器刷新iScroll之前一點(diǎn)時(shí)間。

為了確保javascript得到更新后的屬性,應(yīng)該像下面的例子這樣使用刷新方法:

ajax("page.php", onCompletion);

function onCompletion () {
    // Update here your DOM

    setTimeout(function () {
        myScroll.refresh();
    }, 0);
};

這里調(diào)用refresh()使用了零秒等待,如果你需要立即刷新iScroll邊界就是如此使用。當(dāng)然還有其他方法可以等待頁(yè)面重繪,但零超時(shí)方式相當(dāng)穩(wěn)定。

注:*如果你有一個(gè)相當(dāng)復(fù)雜的HTML結(jié)構(gòu),你應(yīng)該給瀏覽器更多的執(zhí)行事件,可以設(shè)置100到200毫秒的超時(shí)時(shí)間。
這通常適用于所有任務(wù)必須在DOM上進(jìn)行。通常給渲染器一些執(zhí)行的時(shí)間。*

自定義事件

iScroll還提供額一些你可以掛靠的有用的自定義事件。
使用on(type, fn)方法注冊(cè)事件。

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

上面的代碼會(huì)在每次滾動(dòng)停止是執(zhí)行doSomething方法。
可以掛靠的事件如下:

beforeScrollStart,在用戶觸摸屏幕但還沒有開始滾動(dòng)時(shí)觸發(fā)。
scrollCancel,滾動(dòng)初始化完成,但沒有執(zhí)行。
scrollStart,開始滾動(dòng)
scroll,內(nèi)容滾動(dòng)時(shí)觸發(fā),只有在scroll-probe.js版本中有效,請(qǐng)參考o(jì)nScroll event。
scrollEnd,停止?jié)L動(dòng)時(shí)觸發(fā)。
flick,用戶打開左/右。
zoomStart,開始縮放。
zoomEnd,縮放結(jié)束。

按鍵綁定

你可以激活keyBindings選項(xiàng)來(lái)支持鍵盤控制。默認(rèn)情況下iScroll監(jiān)聽方向鍵,上下翻頁(yè)建,home/end鍵,但這些按鍵綁定完全可以自定義。
你可以通過傳遞一個(gè)包含按鍵代碼列表的對(duì)象來(lái)進(jìn)行按鍵綁定。
默認(rèn)的按鍵值如下:

keyBindings: {
    pageUp: 33,
    pageDown: 34,
    end: 35,
    home: 36,
    left: 37,
    up: 38,
    right: 39,
    down: 40
}

當(dāng)然你也可以傳遞字符串進(jìn)行按鍵綁定(例如:pageUp: "a")。只要你設(shè)置了對(duì)于的按鍵值,那么iScroll就會(huì)響應(yīng)你的設(shè)置。

滾動(dòng)條信息

iScroll存儲(chǔ)了很多有用的信息,您可以使用它們來(lái)增強(qiáng)您的應(yīng)用。
你可能會(huì)發(fā)現(xiàn)有用的:

myScroll.x/y,當(dāng)前位置
myScroll.directionX/Y,最后的方向 (-1 down/right, 0 still, 1 up/left)
myScroll.currentPage,當(dāng)前對(duì)齊捕獲點(diǎn)
下面是關(guān)于處理時(shí)間的代碼示例:

myScroll = new IScroll("#wrapper");
myScroll.on("scrollEnd", function () {
    if ( this.x < -1000 ) {
        // do something
    }
});

如果 x 位置是低于-1000 像素滾輪停止時(shí),上述執(zhí)行某些代碼。請(qǐng)注意我用這個(gè)產(chǎn)品而不是 myScroll,您可以使用兩個(gè)當(dāng)然,但 iScroll 傳遞本身作為這種情況下,當(dāng)觸發(fā)自定義事件的功能。

銷毀

在不需要使用iScoll的時(shí)候調(diào)用iScroll實(shí)例的公共方法destroy()可以釋放一些內(nèi)存。

myScroll.destroy();
myScroll = null;

參考:
https://github.com/cubiq/iscroll
http://iiunknown.gitbooks.io/...

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/85886.html

相關(guān)文章

  • iscroll.js和lazyload.js兼容(滑動(dòng)時(shí),緩沖好圖片不更新)

    摘要:另外我的這段代碼可謂神來(lái)之筆,大家好好看看這一步很重要,否則圖片不能完成緩沖效果原理在正在加載完后,就設(shè)置為可以緩沖。加載圖片使用的效果淡入在離可視區(qū)以內(nèi)的圖片也開始加載了,提升體驗(yàn)度取消等默認(rèn)不可點(diǎn)擊效果解決。 以前在做項(xiàng)目的時(shí)候,把jquery.lazyload.js和iscroll.js一起使用,當(dāng)滑動(dòng)頁(yè)面的時(shí)候,iscroll的滑動(dòng)效果出來(lái)了,但是圖片懶加載的效果沒出來(lái),主要是...

    Cheng_Gang 評(píng)論0 收藏0
  • listloading 一個(gè)移動(dòng)端上拉、下拉加載更多組件

    摘要:是一個(gè)移動(dòng)端的上拉下拉加載更多的組件。因?yàn)樵诠?jié)點(diǎn)元素創(chuàng)建之前,必須先設(shè)定高度,否則會(huì)導(dǎo)致無(wú)法滾動(dòng)創(chuàng)建完畢是指定給第一個(gè)子元素滾動(dòng),所以的上拉和下拉刷新也是追加到第一個(gè)子元素里面,其實(shí)把第一個(gè)子元素想象成為里面的就可以了。 listloading.js listloading是一個(gè)移動(dòng)端的上拉、下拉加載更多的組件。主要依賴于iscroll.js v5.1.2基礎(chǔ)上開發(fā)的組件,基礎(chǔ)庫(kù)可以使...

    jeyhan 評(píng)論0 收藏0
  • 關(guān)于數(shù)據(jù)異步加載引起Iscroll.js布局出錯(cuò)解決方案

    摘要:今天要說的就是用實(shí)現(xiàn)局部滾動(dòng)出現(xiàn)頁(yè)面布局的問題。問題頁(yè)面底部多出一部分或是頁(yè)面顯示不全,拉動(dòng)回彈后內(nèi)容又顯示不全。原因數(shù)據(jù)異步加載,無(wú)法正確獲取頁(yè)面元素的真實(shí)高度。自定義方法請(qǐng)求成功切換頁(yè)面后刷新解決異步加載數(shù)據(jù)布局出錯(cuò)或 相信對(duì)于前端攻城獅來(lái)說Iscroll.js,大家并不陌生,lite版本只有24kb。但可以解決 1、position:fixed在IOS端的兼容性問題 >移動(dòng)端vi...

    MonoLog 評(píng)論0 收藏0
  • 關(guān)于數(shù)據(jù)異步加載引起Iscroll.js布局出錯(cuò)解決方案

    摘要:今天要說的就是用實(shí)現(xiàn)局部滾動(dòng)出現(xiàn)頁(yè)面布局的問題。問題頁(yè)面底部多出一部分或是頁(yè)面顯示不全,拉動(dòng)回彈后內(nèi)容又顯示不全。原因數(shù)據(jù)異步加載,無(wú)法正確獲取頁(yè)面元素的真實(shí)高度。自定義方法請(qǐng)求成功切換頁(yè)面后刷新解決異步加載數(shù)據(jù)布局出錯(cuò)或 相信對(duì)于前端攻城獅來(lái)說Iscroll.js,大家并不陌生,lite版本只有24kb。但可以解決 1、position:fixed在IOS端的兼容性問題 >移動(dòng)端vi...

    sixleaves 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<