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

         <!-- 轮播图 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-->

 .slide-image{width:100%;display:block}

 .swiper-box{position:relative;width:100%;box-sizing:border-box}

 .dots{position:absolute;left:;right:;bottom:;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}

 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链接列表

         });

     }

 });