微信JSSDK接口,previewImage
官方说明和例子:
wx.previewImage({
current: , // 当前显示图片的http链接
urls: [] // 需要预览的图片http链接列表
});
document.querySelector(#previewImage).onclick = function () {
wx.previewImage({
current: http://img5.douban.com/view/photo/photo/public/p1353993776.jpg,
urls: [
http://img3.douban.com/view/photo/photo/public/p2152117150.jpg,
http://img5.douban.com/view/photo/photo/public/p1353993776.jpg,
http://img3.douban.com/view/photo/photo/public/p2152134700.jpg
]
});
};
可以看出例子中的数据是写死在里面的,所以要自己写个JS,然后把指定div里面图片加载到wx.previewImage中
<div id="previewImage">
<img src="https://www.hackhp.com/1.jpg"><img src="https://www.hackhp.com/2.jpg" >
</div>
把图片链接都添加到wx.previewImage里
<script>
$(document).on(click, #previewImage img,function(event) {
var imgArray = [];
var curImageSrc = $(this).attr(src);
var oParent = $(this).parent();
if (curImageSrc && !oParent.attr(href)) {
$(#previewImage img).each(function(index, el) {
var itemSrc = $(this).attr(src);
imgArray.push(itemSrc);
});
wx.previewImage({
current: curImageSrc,
urls: imgArray
});
}
});
</script>
上一篇:
uniapp开发微信小程序-2.页面制作
