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