实现图片的展示和大图预览
使用wx.previewImage(OBJECT)来实现
OBJECT参数说明：
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| current | String | 否 | 当前显示图片的链接，不填则默认为 urls 的第一张 |
| urls | StringArray | 是 | 需要预览的图片链接列表 |
| success | Function | 否 | 接口调用成功的回调函数 |
| fail | Function | 否 | 接口调用失败的回调函数 |
| complete | Function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
示例代码：
wx.previewImage({
current: '', // 当前显示图片的http链接
urls: [] // 需要预览的图片http链接列表
})地址：https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html#wxpreviewimageobject
实例代码
wxml
<view class="weui-uploader"> <view class="weui-uploader__hd"> <view class="weui-uploader__title">图片列表</view> </view> <view class="weui-uploader__bd"> <view class="weui-uploader__files" id="uploaderFiles"> <block wx:for="{{Images}}"> <image bindtap="clickImage" style="width: 200px; height: 200px;" src="{{serverAddress}}{{item.ImagePath}}" mode="aspectFill" /> </block> </view> </view> </view>
js
clickImage: function (e) { var current = e.target.dataset.src wx.previewImage({ current: current, urls: ImageLinkArray,//内部的地址为绝对路径 fail: function() { console.log('fail') }, complete: function () { console.info("点击图片了"); }, }) },
欢迎阅读本系列文章：微信小程序开发教程目录
