百度小程序-圖片畫廊-使用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鏈接列表 
        });
    }
});

效果圖