微信小程序系列——点击图片放大预览

简介: 微信小程序系列——点击图片放大预览

需求

开发的时候,把图片放到页面上,点击图片没有任何反应,不能放大也不能缩小

这怎么能行!!!

所以需求来了:点击图片能够把图片弹出来,这样就能放大图片看细节了!


实现步骤

微信提供了预览图片的接口,其中urls是必填的,类型



     

step1 wxml文件里添加点击事件

<image class='img' src='{{imgUrl}}' bindtap='clickImg'></image>

解读:

src:存放当前图片的路径

bindtap:自定义点击事件


step2 给图片添加一个点击事件

根据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) { },
  })
},


step3 测试

使用微信开发者工具测试,点击图片后查看调试器,如果没有报错,说明已经成功了!

当然,也可以使用手机来测试!

OK, GAME OVER

相关文章
|
4月前
|
小程序 数据库 C++
【微信小程序-原生开发】实用教程17 - 详情页触发列表页刷新,点击图片放大预览,转发给好友/群,分享到朋友圈
【微信小程序-原生开发】实用教程17 - 详情页触发列表页刷新,点击图片放大预览,转发给好友/群,分享到朋友圈
42 0
|
4月前
|
小程序 JavaScript
【微信小程序-原生开发】实用教程03-自定义底部导航(含自定义tabBar导航高亮需点击两次的解决方案)
【微信小程序-原生开发】实用教程03-自定义底部导航(含自定义tabBar导航高亮需点击两次的解决方案)
131 0
|
5月前
|
小程序
小程序一键全局一秒变黑白(效果预览)
小程序一键全局一秒变黑白(效果预览)
48 0
|
6月前
|
小程序
微信小程序实现点击复制(wx.setClipboardData)
微信小程序实现点击复制(wx.setClipboardData)
147 0
|
6月前
|
移动开发 小程序
微信小程序web-view嵌入uni-app H5页面,通过H5页面传参给小程序进行转发分享页面,并通过点击转发出来的卡片,定向打开对应H5路径
微信小程序web-view嵌入uni-app H5页面,通过H5页面传参给小程序进行转发分享页面,并通过点击转发出来的卡片,定向打开对应H5路径
|
小程序
【uniapp】视频分享预览小程序
【uniapp】视频分享预览小程序
|
小程序
微信小程序如何实现多图上传及预览删除
微信小程序如何实现多图上传及预览删除
123 0
|
小程序 API
小程序查看(预览)文件
小程序查看(预览)文件
535 0
|
小程序
解决微信小程序echarts图表真机预览模糊
解决微信小程序echarts图表真机预览模糊
207 0
|
30天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
452 7

热门文章

最新文章