效果图:
====>>>>
代码:
<swiper style="width:100%;height:375rpx" indicator-dots="true" autoplay="true" interval="5000" duration="500"> <swiper-item wx:for="{{imgUrls}}" wx:key> <image data-src="{{item}}" bindtap=\'previewImage\' style=\'width:100%;height:100%\' mode=\'aspectFill\' src="{{item}}" class="slide-image"/> </swiper-item> </swiper>
//注释: data-src="{{item}}" 别忘了
data: {
imgUrls: [
\'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640\',
\'https://www.cnblogs.com/images/likecs_com/520BigBear/1196074/t_dog.jpg\'
]
},
/**
* 预览图片
*/
previewImage(e) {
const current = e.target.dataset.src //获取当前点击的 图片 url
console.log(current)
wx.previewImage({
current,
urls: this.data.imgUrls
})
}
官方参考文档:https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.previewImage.html
peace & love -------大熊
请发表评论