微信公众号网页上点击放大图片浏览，解决方案

最新推荐文章于 2025-01-12 20:09:02 发布

转载最新推荐文章于 2025-01-12 20:09:02 发布 · 404 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ch-zaizai/p/6196337.html

文章标签：

#javascript #ViewUI

本文介绍了一种利用微信JS-SDK实现图片预览的方法。通过监听点击事件并获取所有预览图片数组，使用wx.previewImage接口展示图片预览效果。适用于微信环境下多张图片的查看需求。

//微信自带的图片预览
$(document).on('click', '.previewImage img',function(event) {
var imgArray = [];
var curImageSrc = $(this).attr('src');
//alert(1);
var oParent = $(this).parent();
if (curImageSrc && !oParent.attr('href')) {
$('.previewImage img').each(function(index, el) {
var itemSrc = $(this).attr('src');
imgArray.push("http://192.168.31.129/qianfan/"+itemSrc);//如果在微信上测试，点击预览后出现一直在加载无法显示的情况，建议把图片的路径设置成全路径,如：http://blog.zongdaosoft.com/uploadFiles/uploadImgs/17/1.jpg
});
wx.previewImage({
current: curImageSrc,
urls: imgArray
});
}
});