微信小程序点击图片放大 小程序实现图片放大预览

小程序开发

2021-04-28

  我们不管是在浏览网站还是小程序上面图片的时候,都喜欢通过点击图片来将其放大,这一功能大大的提高了用户的浏览体验,因此我们在开发小程序的时候,需要特别注重图片放大的功能,今天厦门在乎科技为大家带来微信小程序点击图片放大介绍,一起来了解一下吧。

  

微信小程序点击图片放大 小程序实现图片放大预览


  小程序实现图片放大预览:

  方法一:使用微信小程序图片预览接口

  我们可以看到api需要两个参数,分别通过下面的data-list和data-src来传到js中

  wxml代码:

  

微信小程序点击图片放大 小程序实现图片放大预览


  js代码:

  

微信小程序点击图片放大 小程序实现图片放大预览


  1.给图片添加一个点击事件(imgYu)

  2.使用event.currentTarget.dataset.自定义属性名称 来获取data-的值 如event.currentTarget.dataset.src (获取data-src的值)

  3.之后将获取的两个值 放到wx.previewImage接口 里面即可

  

微信小程序点击图片放大 小程序实现图片放大预览


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

  

微信小程序点击图片放大 小程序实现图片放大预览


  1.wxml文件里添加点击事件

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

  2.给图片添加一个点击事件

  根据wxml里的clickImg事件,创建一个点击事件:注意参数里的urls,是一个数组

  

微信小程序点击图片放大 小程序实现图片放大预览


  3.测试

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

  

微信小程序点击图片放大 小程序实现图片放大预览


  以上就是今天为大家带来的关于“微信小程序点击图片放大 小程序实现图片放大预览”全部内容,一般而言,用户在浏览图片的时候,已经习惯点击图片放大缩小的操作,所以这个功能还是非常重要的,想要了解更多关于微信小程序开发的内容,欢迎关注厦门在乎科技-专注小程序、app、网站开发

即刻联系「在乎科技」专业项目经理为您提供产品咨询和项目报价!

立即咨询

CONTACT US

联系我们

联系电话:

131-6399-9993

电子邮箱:

公司地址:

厦门市思明区莲花南路6号北方大厦601单元

公司地址