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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏calmound

基于iframe的移动端嵌套

需求描述 上上周接到了新的项目,移动端需要做一个底部有五个导航,点击不同的导航页面主体显示不同的页面,其中两个页面是自己做,而另外三个页面是引用另外三个网址,其...

5496
来自专栏前端小作坊

浏览器的overflow事件

Webkit和Firefox其实是原生支持探测元素overflow状态改变的事件。参看这个DEMO:

851
来自专栏DeveWork

WordPress自带TinyMCE编辑器相关功能增强

WordPress 默认的那个编辑器叫做TinyMCE。TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Fi...

3275
来自专栏知晓程序

一键搞定!小程序调用日历本该如此简单

2244
来自专栏大前端开发

微信小程序之图片选择、预览与上传

所谓:一图胜千言。这话说明了图片描述事物的能力是非常强大的(怪不得我们可以用表情包聊一整天),尤其现在的手机拍照功能那么方便,用户对使用拍照和相册的需求日益上升...

5925
来自专栏编程坑太多

「小程序JAVA实战」 小程序远程调试(九)

PS:最后想到了什么老铁,可以查看远端的代码是不是就可以获取到借鉴他的代码了。其实微信早就想到了,不是所有的都可以的。远端调试必须知道他的APPID的,不是说直...

1031
来自专栏前端侠2.0

表格内,设置许多元素的大小时,js的速度慢的办法

思路1:设置td为relative,input为absolute,然后设置input大小为td的大小。

1322
来自专栏ionic3+

【Appetite】ionic3实录(四)微调Segment,并引出自定义组件概念

用ionic3来实现就是采用segment组件。其中ios和android的样式分别如下两图:

982
来自专栏jiajia_deng

react-router 环境使用锚点的方法

1972
来自专栏coding

vue.js组件间通信

组件间需要能相互通信才价值,通信包括数据的传递,方法的调用。这样才能将不同组件结合起来搭建页面

891

扫码关注云+社区

领取腾讯云代金券