在开发小程序时经常会碰到图片预览的问题，那如何实现呢？请看下面：
wxml:
<swiper indicator-dots='{{Idxdots}}' indicator-active-color='red' indicator-color='white' autoplay='true' duration='500' interval='2000'>
<block wx:for="{{swiperIndex}}" wx:for-item="item" wx:key="*this">
<swiper-item>
<image src='{{item}}' data-src="{{item}}" mode="cover" bindtap='previewImage'></image>
</swiper-item>
</block>
</swiper>
js:
data: {
Idxdots:true,
swiperIndex:[
"https://shop.gxyourui.cn/addons/ewei_shopv2/plugin/app/static/images/default/banner-1.jpg",
"https://shop.gxyourui.cn/addons/ewei_shopv2/plugin/app/static/images/default/banner-2.jpg"
]
},
previewImage:function(e){
console.log(e.target);
wx.previewImage({
urls:this.data.swiperIndex,
current:e.target.dataset.src
})
},
效果图如下：
注意事项：
wx.previewImage要使用网络图片，本地图片预览不了，要用真机测试上
更多问题，可前往http://sucai.gxyourui.cn/Home/Article/blog_detail/article_id/57.html