微信公众号开发之图片预览

最新推荐文章于 2022-09-15 15:08:31 发布

qq_39267979

最新推荐文章于 2022-09-15 15:08:31 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信公众号开发之图片预览文章标签：微信公众号开发之图片预览

本文链接：https://blog.youkuaiyun.com/qq_39267979/article/details/82867626

微信公众号开发之图片预览专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种利用微信JS-SDK实现图片预览功能的方法，通过解析HTML结构中的图片元素，收集所有图片链接并使用微信提供的previewImage API，实现了用户点击图片后预览和滑动查看同一组内所有图片的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="weui-flex shenheimg_center">
	<div class="weui-flex__item">
		 <a>
			<img src="../img/img1.png" onclick="preview(this)"><p>图1</p>
		</a>
	</div>
	<div class="weui-flex__item">
		<a>
			<img src="../img/img2.png" onclick="preview(this)"><p>图2</p>
		</a>
	</div>
	<div class="weui-flex__item">
		<a>
			<img src="../img/img3.png" onclick="preview(this)"><p>图3</p>
		</a>
	</div>
	<div class="weui-flex__item">
		<a>
			<img src="../img/img4.png" onclick="preview(this)"><p>图4</p>
		</a>
 </div>

js:

function preview(that){
	var imgs=$(that).parents(".shenheimg_center").find("img");
	var urls=[];
	imgs.each(function(){
		urls.push($(this).attr("src"));
	});
	wx.previewImage({
		current:$(that).attr("src"),
		urls:urls
	});
}