微信小程序如何实现点击图片放大功能

微信(小程序)  /  管理员 发布于 5年前   1069

这篇文章主要介绍了微信小程序如何实现点击图片放大功能,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

WXML：

WXSS：

.imgList{ width: 100%;}.imgList .imgList-li{ width: 100%;}.imgList .imgList-li .img{ width: 400rpx; height: 400rpx;}

JS：

Page({ data: {  imgArr:[   'http://bpic.588ku.com/element_origin_min_pic/16/10/30/528aa13209e86d5d9839890967a6b9c1.jpg',   'http://bpic.588ku.com/element_origin_min_pic/16/10/30/54fcef525fa8f6037d180f3c26f3be65.jpg',   'http://bpic.588ku.com/element_origin_min_pic/16/10/30/62e3ca3a02dddb002eff00482078d194.jpg',   'http://bpic.588ku.com/element_origin_min_pic/16/10/31/c7167fcfb4ebcd12621c05b0c852e98e.jpg'  ] }, previewImg:function(e){  console.log(e.currentTarget.dataset.src);  let that = this;  wx.previewImage({   current:e.currentTarget.dataset.src,   //当前图片地址   urls: that.data.imgArr,        //所有要预览的图片的地址集合 数组形式  }) }})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• 微信小程序实现点击图片放大预览
• 微信小程序实现通过双向滑动缩放图片大小的方法
• 微信小程序内拖动图片实现移动、放大、旋转的方法
• 微信小程序实现图片上传放大预览删除代码
• 微信小程序中实现手指缩放图片的示例代码
• 微信小程序选择图片和放大预览图片功能
• 微信小程序实现图片放大预览功能
• 微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
• 微信小程序 图片等比例缩放（图片自适应屏幕）