小程序预览图片wx.previewImage

效果图:

====>>>>

 

代码:

<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/cnblogs_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 -------大熊

转载于:https://www.cnblogs.com/520BigBear/p/11138414.html

相关资源：数据结构—成绩单生成器