微信小程序放大图片轮播

实现点击图片弹出大图可以轮播

1、点击事件
2、放大
3、左右滑动查看上、下一张

提示：未使用 wx.previewImage() 自己结合弹框实现的

代码如下

wxml文件

<view class="container">
   <view class="img" wx:for="{{scope}}" bindtap="showModal"  data-index='{{index}}'>
    <image src="{{item.image}}" mode="widthFix"></image>
   </view>
   <view
      class='modal-mask'
      bindtap='hideModal'
      catchtouchmove='preventTouchMove'
      wx:if='{{showModal}}'
    ></view>
    <view class='modal-dialog' wx:if='{{showModal}}' style='margin-top: -{{Height/2+25}}px;'>
      <view class="modal-content">
      <view class="modal-cont">
        <swiper class="con_scope"  autoplay='{{false}}' current='{{index}}' 	circular='{{true}}' style='height:{{Height+ 50}}px'>
      <swiper-item wx:for="{{scope}}">
      <view class="con_image">
         <image src="{{item.image}}" mode="widthFix" bindload='imgHeight'></image>
          <view class="text">{{item.text}}</view>
        </view>
       </swiper-item>
      </swiper>
      </view>
    </view>
  </view>
  </view>

css文件

.container{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: flex-start;
  flex-direction:row
}
.img{
  width: 25%;
}
.img image{
  width: 100%;
  height: auto;
}
.modal-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000000;
  opacity: 0.6;
  overflow: hidden;
  z-index: 9000;
  color: #fff;
}

.modal-dialog {
  width: 100%;
  overflow: hidden;
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 9999;
}
.modal-content{
  width: 100%;
  text-align: center;
}
.con_scope{
  width: 100%;
}
.con_image image{
  width: 100%;
  height: auto;
}
.text{
  display:block;
  padding-top: 30rpx;
  font-size: 28rpx;
  color: #ffffff;
}

js文件

const app = getApp()
Page({
  data: {
    scope: [{
      image: '/images/tu1.png',
      text: '设备损坏'
    },
    {
      image: '/images/tu2.png',
      text: '操作不规范'
    },
    {
      image: '/images/tu3.png',
      text: '卫生不达标'
    },
    {
      image: '/images/tu2.png',
      text: '操作不规范'
    },
    {
      image: '/images/tu3.png',
      text: '卫生不达标'
    },
    {
      image: '/images/tu2.png',
      text: '操作不规范'
    },
    {
      image: '/images/tu3.png',
      text: '卫生不达标'
    }],
    index:'',
    showModal: false,
    Height: '',
  },
  imgHeight:function(e){
    var winWid = wx.getSystemInfoSync().windowWidth; 
    var imgh=e.detail.height;
    var imgw=e.detail.width;
    var swiperH=winWid*imgh/imgw 
    this.setData({
      Height:swiperH,
    })
  },
  //显示弹框
  showModal: function (e) {
    const index = e.currentTarget.dataset.index;
    this.setData({
      index: index,
      showModal: true,
    })
  },
  // 隐藏弹框
  hideModal: function () {
    this.setData({
      showModal: false
    });
  },
  onLoad() {},
})