微信小程序-图片放大与缩小
wxml文件里添加点击事件
<image class='img' src='{{imgUrl}}' bindtap='clickImg'></image>
src:存放当前图片的路径
bindtap:自定义点击事件
给图片添加一个点击事件
根据wxml里的clickImg事件,创建一个点击事件:
注意参数里的urls,是一个数组
data: {imgUrl:'/images/img.jpg' //图片路径
},
//点击事件
clickImg: function(e){var imgUrl = this.data.imgUrl;wx.previewImage({urls: [imgUrl], //需要预览的图片http链接列表,注意是数组current: '', // 当前显示图片的http链接,默认是第一个success: function (res) { },fail: function (res) { },complete: function (res) { },})
},
测试
- 使用微信开发者工具测试,点击图片后查看调试器,如果没有报错,说明已经成功了!
- 当然,也可以使用手机来测试!
微信小程序-图片放大与缩小相关推荐
- 微信小程序图片放大预览效果的实现,轮播图点击放大预览
近期很多刚学习小程序的同学,想做哪种图片点击放大,然后可以左右滑动预览的效果.我也特意去研究下,发现直接用微信程序自己的api就可以很方便的实现.今天就来教大家如何实现小程序图片点击放大的效果. 老规 ...
- 微信小程序图片放大预览效果的实现
效果预览 效果图有点快,但是可以大致看出来效果了.我再给大家描述下吧 一个页面有3张图片,点击其中任意一张都可以放大预览.然后在预览的时候,左右滑动,还可以看另外两张图片. 话不多说,直接上代码 1, ...
- 微信小程序图片(头像)裁剪工具we-cropper含2d版-完整版
微信小程序图片(头像)裁剪工具we-cropper含2d版-完整版 本教程基于 we-cropper v1.4.0,非本人同意禁止任何形的转载 we-cropper官方下载链接 效果图 一.非2d版 ...
- 微信小程序图片轮转播放
微信小程序图片轮播 步骤一:创建项目,注意创建的路径,路径中涉及到的文件最好用英文命名. 这里将项目创建在D:\SotfWare\WechatPG\test1.test1是项目的文件名.创建结束之后, ...
- 小程序 图片上传php后台,微信小程序图片选择、上传到服务器、预览(PHP)实现实例...
微信小程序图片选择.上传到服务器.预览(php)实现实例 小程序实现选择图片.预览图片.上传到开发者服务器上 后台使用的tp3.2 图片上传 请求时候的header参考时可以去掉(个人后台验证权限使用 ...
- php 点击选择图片上传,微信小程序图片选择、上传到服务器、预览(PHP)实现实例...
微信小程序图片选择.上传到服务器.预览(PHP)实现实例 小程序实现选择图片.预览图片.上传到开发者服务器上 后台使用的tp3.2 图片上传 请求时候的header参考时可以去掉(个人后台验证权限使用 ...
- 微信小程序图片上传九宫格拖拽组件
微信小程序图片上传&九宫格拖拽组件 前言 图片上传加九宫格拖拽是一个比较常用的组件,常用于发帖或者评论等内容上传模块,我这篇九宫格拖拽的思路是借鉴了一款优雅的小程序拖拽排序组件实现这篇文章 实 ...
- 微信小程序图片裁剪插件image-cropper
image-cropper 一款高性能的微信小程序图片裁剪插件,支持旋转.设置尺寸 功能亮点 1.支持旋转支持旋转支持旋转. 2.性能超高超流畅,大图毫无卡顿感. 3.可以设置导出图片尺寸. 4.自由 ...
- 微信html5图片裁切,微信小程序图片裁剪工具we-cropper
微信小程序图片裁剪工具we-cropper 一款灵活小巧的canvas图片裁剪器 在线体验 Feature 实用的API 灵活的钩子函数 多场景的demo可供参考: 常规裁剪 上传裁剪头像 裁剪网络图 ...
- 微信小程序图片无法存入云开发数据库,求解决
微信小程序图片无法存入云开发数据库,求解决 上传图片的js代码片段 上传图片的js代码片段 上传图片的js代码片段,觉得自己代码的没错,也能打印出来上传的图片地址,但是发现并没有存进数据库,求大神指点 ...
最新文章
- CakePHP中出现persistent is not writable等Warning的解决方法
- C++开发中类的定制
- JAVA中文支持指南(Vera Yuanti)
- C++ 通讯录设计(三)
- 在并发情况下,Elasticsearch 如果保证读写一致?
- 用年轻人的压力赚钱,解压馆是门好生意吗?
- 案例:include指令的具体用法
- Scala的sealed关键字
- 唯一的超级语言,前进的步伐不可阻挡
- Tomcat启动时日志报 dcom.sun.manager.jmxremote 异常导致无法正常启动使用
- abaqus dat文件 matlab_提升Abaqus求解效率的七种武器
- 手机问卷调查报告 html,使用手机问卷调查报告
- 西北师范大学计算机科学与工程学院导师,西北师范大学计算机科学与工程学院导师简介-陈旺虎...
- 理解泰勒中值定理1的证明过程的两个影响理解的简单隐含推导
- Xposed框架动态调试第三方APP—实战演示
- Reactor模式:反应器模式
- Gliffy - 一个在线的画UML图,流程图的工具
- python获取内存地址上存储的值
- 2011年最新企业offer
- debian常用命令整理