小程序实现点击图片放大图片并显示轮播图效果，swiper组件

1.swiper组件实现轮播图效果

wxml文件

  <!-- //触发弹出层：bindtap="show" -->
  <view class="image-groud">
    <image bindtap="show" src="/images/001.jpg" class="img-unit"></image>
  </view>
<!-- //弹出层内容，其中的“我知道”中绑定让弹出层消失的函数：bindtap="hide" -->
<view class="modal-box" hidden="{{flag}}" bindtap="hide">
      <view class="modal-content">
        <swiper indicator-dots="true" autoplay="{{false}}" autoplay="false" interval="{{interval}}" duration="{{duration}}" circular="true">
           <block wx:for="{{imgUrls}}" wx:key="index">
           <!-- <block wx:for="{{imgUrls}}" wx:key="{{index}}"> -->
              <swiper-item>
                 <image src="{{item}}"/>
              </swiper-item>
           </block>
        </swiper>
      </view>
      <!-- <view>
       <button class="knowBtn" bindtap="hide">我知道了</button>
      </view> -->
</view>

JS文件

data:
{
       imgUrls: [
        '/images/001.jpg',
        '/images/002.jpg',
        '/images/003.jpg',
     
      ],
      indicatorDots: true,  //小点
 
      autoplay: false,  //是否自动轮播
 
      interval: 300000,  //间隔时间
 
      duration: 300,  //滑动时间
      flag: true,
    
  },

  show: function () {
     
    this.setData({ flag: false })
 
  },
  //消失
 
  hide: function () {
 
    this.setData({ flag: true })
 
  },

wcss文件

.unit-box .unit-list .image-groud {
  width: 28%;
  display: flex;
  justify-content: center;
  padding-right: 12rpx;
  /* border-right: 1px #eee solid;
  box-sizing: border-box; */
}

.image-groud .img-unit {
  width: 180rpx;
  height: 150rpx;
}


/* pages/anli/anli.wxss */
.modal-box {
  position:fixed;
  background:rgba(0,0,0,0.8);
  top:0rpx;
  width:100%;
  height:100%;
  z-index: 1;
  }
.modal-content {
  margin-top:150rpx;
  height:600rpx;
  border-radius: 10rpx;
  }
swiper {
    height: 600rpx;
}
.modal-content image{
  width: 100%;
  height: 100%;
}
.knowBtn{
  height:100rpx;
  width: 600rpx;
}

.fenxiang-btn{
  width: 180rpx;
  height: 150rpx;
}