SNS项目笔记<八>--Slides显示大图

slide为ionic专门处理图片轮播的一个控件，在左右轮滑中，有很多控制，导致一些细节上的要求便不可实现，现总结了一下github上相关的issuse来完成对应的需求实现。

1、slides超出内容，竖直滚动

在浏览大图的时候，我们总有些长图进行查看，在查看的过程中，我们难以一次性查看全部内容，于是我们想，如果在slides里面技能横滑切换，又能竖滑滚动查看就好了。这里便研究源码。

slides依赖.png

这里不难看出在slides里面通过依赖于swiper来实现横滑纵滑轮播的。这里贴上swiper的官方链接： 【如果你想了解swipe尝试动手自定义，请点击这里】。通过了解源码，我们知道在slide滑动的时候由“slideTo()”这个方法控制滑动的。这里贴上源码：

/**
 * @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本身来实现的，于是我们可以通过查找slides本身的样式来完成复用，最终达到我们理想的效果：

Slides样式.png

这里我们可以看到，我们的img样式被固定为此样式，我们可以在使用slides的页面样式中复用此样式，就可以让我们的img拥有更多我们自定义的功能，从而达到我们预期的效果：

我的项目代码复用.png

样式达到的效果.gif

2、点击放大

同样，研究源码中，我们可以看到有个zoom选项，其中与zoom相关的属性有以下这么几个：

关于zoom的属性.png

我们不难看出，在API中隐藏了zoomToogle、zoomMax、zoomMin这三大属性，zoomToogle是用来判断是否开启点击放大，zoomMax点击放大后显示的最大的大小，zoomMin点击图片正常显示的大小倍率。我们可以根据不同的max与min组合来完成我们对图片放大进行的比例控制，不过一般可以不需要改变它们，它们默认即为1与3，只用给予zoomToogle为true即可实现了。

出错.gif

可惜的是，在我们进行实践操作的时候，发现了出错，紧接着我们看看cosole.log:

错误log.png

我们不难发现，这个在swiper-zoom里面没获取到attribute，我们肯定在哪里忘了添加一个属性了，于是博主在这里卡住了，大海捞针，我们查看一下swiper官网的文档：

官方文档说明.png

按照官方的方式我们在img外层加个此class于是我们的写法如下：

我们自己的写法.png

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

完善代码过后的效果.gif