微信小程序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; }