(一)官方提供的功能参数
示例代码:
wx.previewImage({
current: '', // 当前显示图片的http链接
urls: [] // 需要预览的图片http链接列表
})
(二)实际使用
WXML
<image wx:for="{{imgList}}" wx:key="imgs" src="{{item}}" data-src="{{item}}" mode='aspectFill' data-list="{{imgList}}" bindtap="imgYu"></image>
JS
data: {
imgList:[
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588829460370&di=367b258aad7db04afb0528c474846648&imgtype=0&src=http%3A%2F%2Fwww.xiancn.com%2Fzt%2Fimages%2Fattachement%2Fjpeg%2Fsite2%2F20200403%2Fa41f727e9e331ff11fe111.jpeg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588829417149&di=bc16745bf68f2fe0919e53f4e16418a8&imgtype=0&src=http%3A%2F%2Fa1.att.hudong.com%2F05%2F00%2F01300000194285122188000535877.jpg',
'/images/pyq_ct.jpg',
'/images/pyq_sp.jpg',
'/images/pyq_wz.jpg'
]
},
imgYu:function(event){
var src = event.currentTarget.dataset.src;//获取data-src
var imgList = event.currentTarget.dataset.list;//获取data-list
console.log(src)
//图片预览
wx.previewImage({
current: src, // 当前显示图片的http链接
urls: imgList // 需要预览的图片http链接列表
})
}
(编辑器内本地设置:勾选“不校验合法域名...”)
直接弹出图片预览,并且会显示图片数量,以及可以左右滑动切换预览。
(尝试了一下,好像不能上传视频,具体的效果可以自行尝试)
需要注意的是,按照官方示例, 可能只支持 http 或者 https 协议的网络图片地址,实际测试中本地图片会出现加载中的loading图。