微信小程序之wx.previewImage图片预览(多张图片预览)

wxml部分代码如下:

<block wx:for="{{pictures}}" wx:for-item='item' wx:for-index='idx'><image class="wehx_picture" src="{{item}}" data-index="{{idx}}" bindtap="previewImage"></image>
</block>

js部分代码如下:

var app = getApp();
Page({data：{pictures: ['https://p0.meituan.net/movie/ea4ac75173a8273f3956e514a4c78018253143.jpeg','https://p0.meituan.net/movie/5d4fa35c6d1215b5689257307c461dd2541448.jpeg','https://p0.meituan.net/movie/0c49f98a93881b65b58c349eed219dba290900.jpg'],//已选择的图片临时路径数组
},
//图片预览previewImage:function(e){var index = e.currentTarget.dataset.index;var pictures = this.data.pictures;wx.previewImage({current: pictures[index], // 当前显示图片的http链接urls: pictures, // 需要预览的图片http链接列表})},
})

css部分代码如下:

.wehx_picture {width: 50rpx;height: 50rpx;margin-right: 14rpx;
}

最终效果如下：

微信小程序之wx.previewImage图片预览(多张图片预览)相关推荐

微信小程序之wx.request:fail错误，真机预览请求无效问题解决，安卓,ios网络预览异常
微信小程序之wx.request:fail错误,真机预览请求无效问题解决,安卓,ios网络预览异常参考文章: (1)微信小程序之wx.request:fail错误,真机预览请求无效问题解决,安卓,i ...
微信小程序之wx.request:fail错误，真机预览请求无效问题解决，安卓,ios网络预览异常(转)...
问题描述:域名已经备案,我全部都有,也在后台配置了,但是手机预览,还是请求失败, PC端是可以请求数据出来的新版开发者工具增加了https检查功能:可使用此功能直接检查排查ssl协议版本问题: 可能 ...
微信小程序系列——点击图片放大预览
需求开发的时候,把图片放到页面上,点击图片没有任何反应,不能放大也不能缩小这怎么能行!!! 所以需求来了:点击图片能够把图片弹出来,这样就能放大图片看细节了! 实现步骤微信提供了预览图片的接口, ...
微信小程序的wx.chooseImage如何把图片传给后端
微信小程序的wx.chooseImage如何把图片传给后端首选wx.chooseImage的用法先见官方文档 => wx.chooseImage 这个的返回值如下↓ 这里可以看到这个temp ...
微信小程序点击放大图片
微信小程序点击放大图片在做微信小程序的时候遇到了这个点击放大的事件,这里记录一下 checkmap:function(e){var imageurl=this.data.mapimagesrc;co ...
微信小程序调用相机选择图片生成水印
项目近期有一个需求,是在小程序使用相机拍照时,页面缩略图和上传服务器(或保存本地)的都是带水印的,水印文案是当前的时间和当前所处的地点. 前期使用了微信小程序的wx.chooseImage相机拍照,再 ...
微信小程序拍照视频上传php,微信小程序-拍照或选择图片并上传文件
微信小程序-拍照或选择图片并上传文件调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=201612 ...
微信小程序-从相册获取图片,视频使用相机拍照,录像上传+服务器(nodejs版)接收
在本文微信小程序-从相册获取图片使用相机拍照本地图片上传之前需要看看微信小程序-获取用户session_key,openid,unionid - 后端为nodejs 代码封装是在上文添加的. ...
微信小程录制视频上传服务器,微信小程序-从相册获取图片,视频使用相机拍照,录像上传+服务器nodejs版接收-微信小程序视频上传功能-微信小程序视频上传...
在本文微信小程序-从相册获取图片使用相机拍照本地图片上传之前需要看看微信小程序-获取用户session_key,openid,unionid-后端为nodejs代码封装是在上文添加的.本文知识点:1. ...

微信小程序之wx.previewImage图片预览(多张图片预览)

微信小程序之wx.previewImage图片预览(多张图片预览)相关推荐

最新文章

热门文章

微信小程序 之wx.previewImage图片预览(多张图片预览)

微信小程序 之wx.previewImage图片预览(多张图片预览)相关推荐

最新文章

热门文章

微信小程序之wx.previewImage图片预览(多张图片预览)

微信小程序之wx.previewImage图片预览(多张图片预览)相关推荐