iScroll5實現卡片左右滑動及動態加載打賞

iScroll5是在iScroll4的基礎重構而來,使用時發現網上大部分例子都是基于iScroll4,在iScroll5上面并不適用,比如橫向滾動、當前索引、元素對齊等,這些不在贅述,有需求可以考慮去看看源碼(重構過的源碼看起來清爽很多)。

因為自己需要一個卡片左右滑動的效果,同時還希望有邊界對齊的能力,不清楚這個效果有沒有類似實現,大概看了下,新版iScroll也不是很大,就直接拿來用了,效果如下圖所示:

iscroll5-1

邊界始終是在上面時間導航始終不會停留在文字中間,下面卡片始終只會停留在元素左側邊界,不會出現如下圖所示情況:

iscroll5-2

基本效果很簡單,因為不想重復造輪子,直接拿iScroll5來實現,時間導航部分還好,使用iScroll5,事先計算好要滾動元素的父級寬度,子元素直接float,然后實例化iScroll設置橫向滾動和元素對齊即可,代碼如下:

new IScroll('#wrapper', {
    scrollX: true,
    snap: '.item'
});

下面的卡片就有些麻煩了,因為是動態加載,期初考慮使用iscroll-infinite.js版的緩存功能(updateCache)實現(iScroll5有五個版本,分別為iscroll.js、iscroll-infinite.js、iscroll-lite.js、iscroll-probe.js、iscroll-zoom.js),嘗試后發現iscroll-infinite.js只實現了縱向的緩存刷新,如果設置scrollX為true,就會出現很嚴重的錯位,粗略看了一下,這個改起來有點麻煩,最后只好放棄使用此功能,認為操作dom后調用iscroll對象的refresh方法,結果發現開啟了snap的情況下,當前索引定位會出現越界而報錯,因為snap默認支持傳boolean或者字符串selector,傳boolean值為true的情況,操作沒有出錯,但是組件根據容器寬度進行對齊,明顯不符合我們的需求;而傳入selector的情況下,第一次初始化時候調用了_initSnap,通過this.options.snap查找到所有dom并緩存在this.options.snap,而調用refresh時并沒有刷新this.options.snap的值,故而這里做了簡單改動,具體代碼片段如下

找到_initSnap方法

_initSnap: function () {
    this.currentPage = {};

    if ( typeof this.options.snap == 'string' ) {
        this.options.snap = this.scroller.querySelectorAll(this.options.snap);
    }

    this.on('refresh', function () {
        //...

        this.pages = [];

        //...
    });

    this.on('flick', function () {
        //...
    });
}

改為

_initSnap: function () {
    this.currentPage = {};

    if (typeof this.options.snap == 'string') {
        this.options.snapSelector = this.options.snap;
        this.options.snap = this.scroller.querySelectorAll(this.options.snap);
    }

    this.on('refresh', function () {
        //...

        this.pages = [];

        if (this.options.snapSelector) {
            this.options.snap = this.scroller.querySelectorAll(this.options.snapSelector);
        }

        //...
    });

    this.on('flick', function () {
        //...
    });
}

將配置為selector的this.options.snap屬性先保留到snapSelector,然后通過this.options.snap查找元素列表并緩存,在refresh時,使用snapSelector重新查找元素列表并替換。以上“//...”表示省略部分代碼,僅所示例,具體代碼位置請根據所使用的版本判斷(注:lite版不支持元素對齊功能)。

iScroll5實現卡片左右滑動及動態加載
文章《iScroll5實現卡片左右滑動及動態加載》二維碼
  • 微信打賞
  • 支付寶打賞

已有8條評論

  1. themebetter

    重構過的源碼確實不那么繁雜了。

    2016-11-18 09:56 回復
  2. 運營-子客

    部分很實用

    2016-11-14 15:52 回復
  3. vpn賬號免費發放

    怪獸博客,交換鏈接?www.52kl.top

    2016-11-08 14:07 回復
  4. 工控資料窩

    現在雙11用的就是這種

    2016-11-04 14:08 回復
  5. 湖南物流總部

    不錯,很詳細的介紹。

    2016-11-04 10:31 回復

(必填)

(必填)

(可選)

黑龙江22选5开奖