微信小程序实现预览图片功能

本文实例为大家分享了微信小程序实现预览图片的具体代码，供大家参考，具体内容如下

先看下效果图：

这种效果在一些商城类的小程序里是很常见的一种功能，实现起来也很简单

下面我们来看一下代码：

我的这些图片资源是从后台拿到的，你们看一下具体的需求，一般都是后台返回，毕竟小程序是有大小限制的。

view class=' content bot ' view class=' content wa ' wx : key=' id ' wx : for=' { { wawa } } ' image src=' { { item。img _ URL } } '模式='宽度固定'数据-src=' { { item。img _ URL } } ' bind tap=' previewImage '/image text class=' waName ' { item。name } }/text/view/viewcss 3360。内容wa { margin-top : 20 rpx；显示： flex flex-方向：柱；正义-内容： flex-start；}.contentWa图像{ margin : 0；padd : 0；宽度： 100%;}.getWa { display : flex flex-direction : row；正义-内容：空格；}.waName {宽度： 100%；高度： 80rpx线高： 80 rpxfont-size : 30 rpx文本对齐：中心；背景# fffdisplay:内联块；}JS:

//预览图片预览图像：函数{ var current=e . target。数据集。srcvar IMglist=[]；用于(设I=0；我喜欢这个。数据。瓦瓦。长度；I){ IMglist。推(这个。数据。我.img _ URL)；} wx。preview image({ current : current，//当前点击的图片链接urls: imgList//图片数组}) }, 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。