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

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

浏览量:4798 时间: 来源:前方一片光明

需求

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

这怎么能行!!!

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

实现步骤

微信提供了预览图片的接口,其中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

相关文章

微信小程序---对数据的增删改查操作

微信小程序---上传下载图片以及图片的展示

体验小程序

                     

 

更多内容,请关注公众号:程序员高手之路

在公众号回复:小程序资源   即可免费获取以下微信小程序视频教程!

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎