slide為ionic專門處理圖片輪播的一個控件，在左右輪滑中，有很多控制双吆，導(dǎo)致一些細(xì)節(jié)上的要求便不可實現(xiàn)在塔，現(xiàn)總結(jié)了一下github上相關(guān)的issuse來完成對應(yīng)的需求實現(xiàn)幻件。

1、slides超出內(nèi)容蛔溃，豎直滾動

在瀏覽大圖的時候绰沥，我們總有些長圖進(jìn)行查看，在查看的過程中贺待，我們難以一次性查看全部內(nèi)容徽曲，于是我們想，如果在slides里面技能橫滑切換麸塞，又能豎滑滾動查看就好了秃臣。這里便研究源碼。

slides依賴.png

/**
 * @param {?} s
 * @param {?} plt
 * @param {?=} slideIndex
 * @param {?=} speed
 * @param {?=} runCallbacks
 * @param {?=} internal
 * @return {?}
 */
export function slideTo(s, plt, slideIndex, speed, runCallbacks, internal) {
    if (runCallbacks === void 0) { runCallbacks = true; }
    if (typeof slideIndex === 'undefined')
        slideIndex = 0;
    if (slideIndex < 0)
        slideIndex = 0;
    s._snapIndex = Math.floor(slideIndex / s.slidesPerGroup);
    if (s._snapIndex >= s._snapGrid.length)
        s._snapIndex = s._snapGrid.length - 1;
    var /** @type {?} */ translate = -s._snapGrid[s._snapIndex];
    // Stop autoplay
    if (s.autoplay && s._autoplaying) {
        if (internal || !s.autoplayDisableOnInteraction) {
            pauseAutoplay(s, plt, speed);
        }
        else {
            stopAutoplay(s);
        }
    }
    // Update progress
    updateProgress(s, translate);
    // Directions locks
    if (!s._allowSwipeToNext && translate < s._translate && translate < minTranslate(s)) {
        return false;
    }
    if (!s._allowSwipeToPrev && translate > s._translate && translate > maxTranslate(s)) {
        if ((s._activeIndex || 0) !== slideIndex)
            return false;
    }
    // Update Index
    if (typeof speed === 'undefined')
        speed = s.speed;
    s._previousIndex = s._activeIndex || 0;
    s._activeIndex = slideIndex;
    updateRealIndex(s);
    if ((s._rtl && -translate === s._translate) || (!s._rtl && translate === s._translate)) {
        // Update Height
        if (s.autoHeight) {
            updateAutoHeight(s);
        }
        updateClasses(s);
        if (s.effect !== 'slide') {
            setWrapperTranslate(s, plt, translate);
        }
        return false;
    }
    updateClasses(s);
    onTransitionStart(s, runCallbacks);
    if (speed === 0) {
        setWrapperTranslate(s, plt, translate);
        setWrapperTransition(s, plt, 0);
        onTransitionEnd(s, plt, runCallbacks);
    }
    else {
        setWrapperTranslate(s, plt, translate);
        setWrapperTransition(s, plt, speed);
        if (!s._animating) {
            s._animating = true;
            plt.transitionEnd(s._wrapper, function () {
                if (!s)
                    return;
                onTransitionEnd(s, plt, runCallbacks);
            });
        }
    }
    return true;
}

這里重點是updateClasses(s)這個方法，這個方法讓我們看到了其源碼是在切換的時候通過此方法來改變slides的整體布局的偎捎，源碼中最重要的是這句"addClass"蠢终，這里貼上源碼：

addClass重點方法.png

addClass方法本身.png

也就是說，在整個滑動過程中茴她，變化的樣式是通過s：Slides本身來實現(xiàn)的寻拂，于是我們可以通過查找slides本身的樣式來完成復(fù)用，最終達(dá)到我們理想的效果：

Slides樣式.png

這里我們可以看到败京，我們的img樣式被固定為此樣式兜喻，我們可以在使用slides的頁面樣式中復(fù)用此樣式，就可以讓我們的img擁有更多我們自定義的功能赡麦，從而達(dá)到我們預(yù)期的效果：

我的項目代碼復(fù)用.png

樣式達(dá)到的效果.gif

2朴皆、點擊放大

同樣帕识，研究源碼中，我們可以看到有個zoom選項遂铡，其中與zoom相關(guān)的屬性有以下這么幾個：

關(guān)于zoom的屬性.png

我們不難看出肮疗，在API中隱藏了zoomToogle、zoomMax扒接、zoomMin這三大屬性伪货，zoomToogle是用來判斷是否開啟點擊放大，zoomMax點擊放大后顯示的最大的大小钾怔，zoomMin點擊圖片正常顯示的大小倍率碱呼。我們可以根據(jù)不同的max與min組合來完成我們對圖片放大進(jìn)行的比例控制，不過一般可以不需要改變它們宗侦，它們默認(rèn)即為1與3愚臀，只用給予zoomToogle為true即可實現(xiàn)了。

出錯.gif

可惜的是矾利，在我們進(jìn)行實踐操作的時候姑裂，發(fā)現(xiàn)了出錯，緊接著我們看看cosole.log:

錯誤log.png

我們不難發(fā)現(xiàn)男旗，這個在swiper-zoom里面沒獲取到attribute舶斧，我們肯定在哪里忘了添加一個屬性了，于是博主在這里卡住了察皇，大海撈針茴厉，我們查看一下swiper官網(wǎng)的文檔：

官方文檔說明.png

按照官方的方式我們在img外層加個此class于是我們的寫法如下：

我們自己的寫法.png

于是再次運行便有以下效果：

完善代碼過后的效果.gif