微信小程序swiper实现图片带描述标题翻页预览

效果：

html:

  <view class='specialImglist'>
      <block wx:for="{{ projectObject.SalesHouse_AtlasAtlasList }}" wx:key="id">

        <view class='imagesList'  bindtap="onToPageSpecial" data-index='{{index}}'>
          <image class='imageBox'  bindtap="onToPageBanner"  src="{{ item.coverImage.accessUrl }}" style="height:218rpx;width:218rpx;">
          </image>
          <view class='imagebumberText'>
            {{item.imageCount}}张
          </view>
          <view class='imagesListatlasName'>{{item.atlasName}} </view>
        </view>
      </block>
    </view>

<view class='tip-content-dialog' wx:if="{{imgListIsShow}}">
  <text class='tip-content-dialog-title'>{{ imagesListObject.atlasName}}</text>
  <text class='dialogClose block tc font24 white' bind:tap='closerule' tap="onClick">×</text> 
  <text class='imagenumber-index'>{{current+1}}/{{ imagesListObject.imageCount}}</text>
  <view class="tip-dialog-view tc bg_rule p_all15 p_b20" scroll-y='true' style='height:85%;'>
     <swiper class='swiper-box image_iameg_div' bindchange="swiperChange"    skip-hidden-item-layout="{{ true }}">
        <block wx:for="{{ imagesListObject.imageList}}" wx:key="id">
          <swiper-item>
            <image bindtap="onToPage"  class="image-image" src="{{ item.imageObj.accessUrl }}" ></image>
            <view  class='imageListText'>{{ item.remark}}</view>
          </swiper-item>
        </block>
      </swiper>
  </view>
</view>

bindtap="onToPageSpecial"  事件进入图片预览。

js:代码

  data: {
    projectObject: {},
    bannerIsShowS:true,
    content:'',
    id:0,
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1300,
    isShow:false,
    imgListIsShow:false,
    imagesListObject:null,
    current: 0
    }

 onToPageSpecial(e){
    var index = e.currentTarget.dataset.index;
    var that = this;
    that.setData({
      imgListIsShow: true,
      imagesListObject: this.data.projectObject.SalesHouse_AtlasAtlasList[index]
    })
 
  }

  closerule(){
    var that = this;
    that.setData({
      imgListIsShow:false
    })
  }


 onToPage:function(){
    var that = this;
    that.setData({
      imgListIsShow: false
    })
  }

    swiperChange: function (e) {
    var that = this;
    if (e.detail.source == 'touch') {
      that.setData({
        current: e.detail.current
      })
    }
  }

css:

 

.tip-content-dialog {
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  z-index: 99999;
  /* margin-top: 80rpx; */
}

.tip-content-dialog .tip-dialog-view {
  width: 100%;
  margin: auto;
  border-radius: 25rpx;
  vertical-align: middle;
  animation: tanchu 400ms ease-in;
  /* overflow: hidden; *//* padding: 20rpx; */
  margin-top: 180rpx;
}

.tip-content-dialog .btn {
  background: #f2f7fa;
}

.tip-content-dialog-title {
  position: absolute;
  text-align: center;
  width: 100%;
  margin-top: 65rpx;
  font-size: 32rpx;
  color: rgba(255, 255, 255, 0.80);
}
.imagenumber-index {
  position: absolute;
  right: 20rpx;
  top: 94rpx;
  width: 80rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 32rpx;
  margin-top: 10rpx;
  color: rgba(255, 255, 255, 0.80);
}

.image_iameg_div {
  margin-top: 30%;
  width: 100%;
  height: 100%;
}

.image-image {
  height: 444rpx;
  width: 100%;
}

.imageListText {
  text-align: center;
  width: 100%;
  font-size: 32rpx;
  color: rgba(255, 255, 255, 0.80);
  margin-top: 400rpx;
}