微信小程序点击图片显示大图(有多张图片时候可以左右滑动)

865 阅读1分钟

1、index.wxml页面:

<view class="imgList"> 
 <swiper class='u-wrp-bnr' indicator-dots='true'  duration='1000'
 circular='true'style="height:750rpx">   
 <block wx:for="{{detailsImg}}" wx:for-index="index">  
    <swiper-item>      
  <image src='{{item}}' data-index='{{index}}' bindtap="previewImg" class="img"></image>    
  </swiper-item>  
  </block> 
 </swiper>
</view>

2、index.wxss页面:

.imgList{ 
 width:100%; 
}
.imgList  .img{ 
 width:100%; 
 height:750rpx;
}

3、index.js页面:

data:{
detailsImg:[]
}

//点击图片预览  
previewImg: function (e) {   
 console.log(e.currentTarget.dataset.index);  
  var index = e.currentTarget.dataset.index; 
   var detailsImg = this.data.detailsImg;  
  wx.previewImage({    
  current: detailsImg[index],//当前图片地址  
    urls: detailsImg //所有要预览的图片的地址集合数组形式  
  }) 
 },

//字符串切割 
 var shopImg = res.data.img 
 self.detailsImg = shopImg.split(",")