百度小程序-图片画廊-使用previewImage方法实现

.swan

        <!-- 轮播图 S-->
            <view class="swiper-box">
                <swiper style='height:{{swiperH}}' bindchange="swiperChange" autoplay="true" interval="3000"
                    duration="500" circular="true">
                    <block s-for="banner" s-for-index="index" s-for-item="item">
                        <swiper-item >
                            <image bindtap="previewOriginImage" data-src="{{item.cover_id}}" lazy-load="true" src="{{item.cover_id}}" class="slide-image" mode="widthFix" bindload='imgHeight' />
                        </swiper-item>
                    </block>
                </swiper>
                <view class="dots">
                    <block s-for="banner" s-for-index="index" s-for-item="imgUrl">
                        <view class="dot {{index == swiperCurrent  ? 'active' : ''}}"></view>
                    </block>
                </view>
            </view>
        <!-- 轮播图 E-->

.css

.slide-image{width:100%;display:block}
.swiper-box{position:relative;width:100%;box-sizing:border-box}
.dots{position:absolute;left:0;right:0;bottom:0;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-bottom:40rpx}
.dots .dot{margin:0 8rpx;width:14rpx;height:14rpx;background:rgba(255,255,255,0.8);border-radius:50%;border:solid 1px #0b82f3;-webkit-transition:all 0.6s;transition:all 0.6s;box-sizing:border-box}
.dots .dot.active{background-color:#0b82f3}

.js

const app = getApp();
Page({
    data: {
        banner: [],//轮播图
        swiperCurrent: "",//轮播图圆点
        swiperH: "",  //这是swiper框要动态设置的高度属性
        arrimgList:[],//图片画廊数组
    },
    onLoad: function () {
        // 监听页面加载的生命周期函数
        this.getBanner();
    },
    onReady: function() {
        // 监听页面初次渲染完成的生命周期函数
    },
    onShow: function() {
        // 监听页面显示的生命周期函数
        app.setInfo();
    },
    onHide: function() {
        // 监听页面隐藏的生命周期函数
    },
    onUnload: function() {
        // 监听页面卸载的生命周期函数
    },
    onPullDownRefresh: function() {
        // 监听用户下拉动作
    },
    onReachBottom: function() {
        // 页面上拉触底事件的处理函数
    },
    onShareAppMessage: function () {
        // 用户点击右上角转发
    },
    swiperChange: function (e) {
        this.setData({
            swiperCurrent: e.detail.current   //获取当前轮播图片的下标
        })
    },
    imgHeight: function (e) {
        var winWid = swan.getSystemInfoSync().screenWidth;
        var imgh = e.detail.height;//图片高度
        var imgw = e.detail.width;//图片宽度
        var swiperH = winWid * imgh / imgw + "px";
        //等比设置swiper的高度。 即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度  ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度
        this.setData({
            swiperH: swiperH//设置高度
        });
        // console.log(e.currentTarget.dataset.src);
        //推入数组 难点可能在这里,数据推入到一个数组中
        this.data.arrimgList.push(e.currentTarget.dataset.src);
        // console.log(this.data.arrimgList);
    },
    getBanner: function () {//获取banner轮播图
        var that = this;
        swan.request({
            url: app.globalData.baseUrl + 'list/banner',
            method: 'GET',
            header: {
                genToken: app.globalData.genToken,
            },
            success: function (res) {
                // console.log(res);
                that.setData({
                    banner: res.data.lines
                })
                // console.log(that.data.banner)
            }
        });
    },
    previewOriginImage(e) {
        console.log(e);
        swan.previewImage({
            current:e.currentTarget.dataset.src,
            urls: this.data.arrimgList,  // 需要预览的图片http链接列表 
        });
    }
});

效果图