微信小程序实现图片预览

简介: wxml页面部分js部分

wxml页面部分:

<image wx:for="{{item.image}}" data-src="{{imageUrl}}" src="{{item}}" data-id="{{item}}" bindtap="previewImage" />

js部分:

// 点击图片时触发预览事件
previewImage: function(event) {
  var currentUrl = event.currentTarget.dataset.id; // 获取当前点击的图片链接
  var urls = [currentUrl]; // 需要预览的图片链接列表
  // 调用微信API的预览图片接口
  wx.previewImage({
    current: currentUrl, // 当前显示图片的链接
    urls: urls // 需要预览的图片链接列表
  });
  console.log(event);
},

okk这样的话就可以使用咯^^~

相关文章
|
7月前
|
小程序 JavaScript
微信小程序图片预览功能?
微信小程序图片预览功能?
|
7月前
|
小程序
微信小程序wx.previewImage实现图片预览
微信小程序wx.previewImage实现图片预览
820 0
|
小程序
小程序实现图片预览+上传
小程序实现图片预览+上传
173 0
|
Android开发
Android图片选择器,仿微信的图片选择器的样式和效果。支持图片预览和图片切换
Android图片选择器,仿微信的图片选择器的样式和效果。支持图片的单选、限数量的多选和不限数量的多选。支持图片预览和图片文件夹的切换。支持图片单选并剪裁。 先上效果图: 1、引入依赖 在Project的build.gradle在添加以下代码 allprojects { repositories { ... maven { url 'https://jitpack.io' } // 如果你使用的是1.4.0或更早的版本,这句可以不用。
6043 0
|
UED 索引
微信小程序 图片上传 图片预览
先看下效果图吧,不得不说 微信小程序的设计真的很好!用户体验也很好~ image.png image.png 拍照和上传照片 官网讲的很详细 image.
2129 0
类似微信图片浏览,常见应用场景如微信朋友圈照片九宫格和微信聊天图片预览
本项目受Google官方demo Zooming a View 启发,实现了点击小图放大至全屏预览,退出全屏恢复至原来位置这两个过程的动画过渡。 常见应用场景如微信朋友圈照片九宫格和微信聊天图片预览,某些手机系统相册等viewpager图片查看 缩放 拖拽下拉缩小退出(效果同微信图片浏览) 特点1.支持自定义图片加载框架。
2261 0
微信小程序开发之图片预览
实现图片的展示和大图预览 使用wx.previewImage(OBJECT)来实现 OBJECT参数说明: 参数 类型 必填 说明 current String 否 当前显示图片的链接,不填则默认为 urls 的第一张 urls StringArray 是 需要预览...
1850 0
|
PHP
PHP仿微信多图片预览上传功能
PHP仿微信多图片预览下载演示地址:http://www.erdangjiade.com/js/830 生产图片区域,上传按钮#btn可替换自己想要的图片 plupload上传var uploader = new plupload.
1242 0
|
Web App开发 PHP
PHP仿微信多图片预览上传
本文演示了手机微信端常用的多图片上传及时预览功能,点击上传的图片可立即删除。 生产图片区域,上传按钮#btn可替换自己想要的图片         plupload上传 var uploader = new plupload.
1050 0
|
1月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
32 0
在线课堂+工具组件小程序uniapp移动端源码