朱高的今天

第2852天：12点半睡好困难

2016年3月10日星期四阴转多云 0～7℃

春节来了之后，公司定 OKRs，除了工作上的 OKRs 外，我自己暗暗定了一个 O，就是每天晚上睡觉不能超过 12 点半。

一个月下来，只有几天完成了。这个事情似乎比工作上的 O 还难完成。

第2851天：用swiper实现类似微信查看图片的效果

2016年3月9日星期三阴 2～7℃

标签:前端

用 swiper（中文）做了一个类似微信查看图片的效果。

线上效果可以用手机浏览有赞社区的这个帖（点击帖内图片后左右滑动）：http://bbs.youzan.com/forum.php?mod=viewthread&tid=47601

/**
 * 场景: 手机浏览论坛帖子，左右滑动查看楼层图片
 * Author: zhugao
 * 注意：例中的 ’.message' 为每个楼层的容器
 */

var swipers = {};
function showSwiperImg(options) {
    var swiperId = 'js-swiper-' + options.pid;

    // 如果该楼层的swiper已经实例化
    if ($('#' + swiperId).size() > 0) {
        // 定位到当前点击的图片
        swipers[options.pid].slideTo(options.slideIndex, 0);
        // 直接显示该swiper
        $('#' + swiperId).fadeIn(200);
    } else {
        // append容器
        var swiperContainer = $(
            '<div class="swiper-container" id="' + swiperId + '">' +
            '   <div class="swiper-wrapper"></div>' +
            '</div>'
        );
        swiperContainer.hide().appendTo('body').fadeIn(200);

        // append内容
        $(options.elem).parents('.message').find('img').each(function() {
            var imageSource = $(this).data('img-source');
            var swiperSlide = $(
                '<div class="swiper-slide">' +
                '   <img data-src="' + imageSource + '" class="swiper-lazy">' +
                '   <div class="swiper-lazy-preloader"></div>' +
                '</div>'
            );
            swiperSlide.appendTo('#' + swiperId + ' .swiper-wrapper');
        });

        // 实例化swiper
        swipers[options.pid] = new Swiper('#' + swiperId, {
            // 间隔
            spaceBetween: 20,
            // 开启图片延迟加载
            lazyLoading : true,
            // 点击swiper
            onTap: function() {
                $('#' + swiperId).fadeOut(200);
            },
            // 单个图片加载结束
            onLazyImageReady: function(swiper, slide, image) {
                // 移除loading
                $(slide).find('.swiper-lazy-preloader').remove();
            }
        });

        // 定位到当前点击的图片
        swipers[options.pid].slideTo(options.slideIndex, 0);
    }
}

// 调用
$('.message').on('click', 'img', function() {
    // 图片所在的楼层
    var pid = $(this).parents('li').attr('id');
    // 点击了第几张小图
    var slideIndex = $(this).parents('.message').find('img').index(this);

    var options = {
        elem: this,
        pid: pid,
        slideIndex: slideIndex
    };
    showSwiperImg(options);
});

css

.swiper-container {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
}
.swiper-slide {
    text-aling: center;
    /* 图片垂直居中 */
    display: -webkit-box;
    -webkit-box-align: center;
}
.swiper-slide img {
    max-width: 100%;
    max-height: 100%;
}