微信小程序点击图片放大

在平时开发微信小程序图片列表中经常有图片点击放大查看的需求，今天我们就看看小程序是如何实现的呢

1.传参

<block wx:for="{{ImageArr}}" wx:key="index">
//previewImg： 点击的方法
// data-imgUrl： 点击图片传递一个imgUrl的参数，该参数就是当前图片的地址
// data-arr   arr参数就是当前循环的图片集合<image src="{{item.ImageUrl}}" class="img" bindtap="previewImg" data-imgUrl="{{item.ImageUrl}}" data-arr="{{ImageArr}}"></image>
</block>

2.逻辑处理

 previewImg: function (e) {// 声明一个空的数组let arr = []// 循环传递过来的图片集合，将每一个图片都push到arr中，如果e.currentTarget.dataset.arr就是纯粹的图片集合可以直接赋值，如果是数组对象最好是循环将每一个图片添加到arr中e.currentTarget.dataset.arr.forEach(item => {arr.push(item.url)})wx.previewImage({current: e.currentTarget.dataset.imgurl, //当前图片地址urls: arr, //所有要预览的图片的地址集合 数组形式success: function (res) {},fail: function (res) {},complete: function (res) {},})}

如此就完成啦，是不是贼简单。

微信小程序点击图片放大相关推荐

初学者笔记——微信小程序点击图片放大
微信小程序点击图片放大 wx.previewImage 官方文档的解释 PS:红色框框内要注意,需要预览的图片连接列表只支持网络连接图片,2.2.3版本以上支持云文件ID. 将图片dream.jpg上 ...
微信小程序点击图片放大预览，新页面中全屏预览图片
第一步:在wxml中定义image组件,并设置绑定事件. <image src="{{priceUrl}}" bindtap="imgClick"> ...
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: 先上效果图,再附上完整源码: 1.多张图片循环渲染后预览.保存.识别带参数二维码 <view w ...
微信小程序点击图片，可全屏预览图片，长按可保存可转发朋友
微信小程序官方方法:官方提供的 previewImage 方法,可点击顶部的官方链接查看直接上代码页面是一个轮播图(根据自己情况即可) 数据是服务端返的,存放在data中注意:构造要预览的图片 ...
微信小程序点击图片保存到相册
小程序实现点击图片保存到相册温馨提示:小程序图片在本地保存成功后放到线上失效,应该是没有设置合法的文件下载域名 // 下载事件函数bindImage: function (e) {var url = ...
微信小程序点击图片预览真机无法显示的问题
问题: 用开发者工具开发编辑时,点击图片预览,一直显示黑屏加载转圈中- 如图所示: 实际效果图: 话不多说,直接上代码 1.html代码: <view class="img-box&q ...
微信小程序点击图片切换图片
实现的效果图实现的方式有2中先说下思路 1 使用wx:if 写2个图片点击的显示一张即可, 2 使用数据传递当拿到图片的时候更换图片即可. 看下代码 2中方式:xml <view clas ...
小程序点击图片放大预览
Banner图点击预览 wxml  <view class='home-banner'><swiper indicator-dots='tr ...
微信小程序点击放大图片
微信小程序点击放大图片在做微信小程序的时候遇到了这个点击放大的事件,这里记录一下 checkmap:function(e){var imageurl=this.data.mapimagesrc;co ...
微信小程序内拖动图片实现移动、放大、旋转
最近接到一个任务,在微信小程序内拖动图片组件实现移动.放大.旋转,并记录这些图片的移动位置,放大比例,旋转角度,在一个画布上生成一张图片,最后保存到手机相册. 我的具体实现思路是这样的:(文章底部留有 ...

微信小程序点击图片放大

1.传参

2.逻辑处理

微信小程序点击图片放大相关推荐

最新文章

热门文章