小程序怎么实现图片放大预览功能-创新互联

这篇文章主要介绍了小程序怎么实现图片放大预览功能，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

创新互联公司主要从事做网站、成都做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务集美,十余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220

微信小程序越来越流行，程序员也在不断接触微信小程序的开发，本篇文章我们就教大家一种微信小程序：当点击图片时，当前图片放大预览，且可以左右滑动的功能。

实现方式：使用微信小程序图片预览接口

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

wxml代码：

js代码：

//图片点击事件
 imgYu:function(event){
 var src = event.currentTarget.dataset.src;//获取data-src
 var imgList = event.currentTarget.dataset.list;//获取data-list
 //图片预览
 wx.previewImage({
  current: src, // 当前显示图片的http链接
  urls: imgList // 需要预览的图片http链接列表
 })
 }

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

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

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

跟据上面的内容我们动手操作一下，就可以实现图片放大预览，且可以左右滑动，赶紧来操作一下吧。

感谢你能够认真阅读完这篇文章，希望小编分享小程序怎么实现图片放大预览功能内容对大家有帮助，同时也希望大家多多支持创新互联网站建设公司，，关注创新互联行业资讯频道，遇到问题就找创新互联网站建设公司，，详细的解决方法等着你来学习!

文章名称：小程序怎么实现图片放大预览功能-创新互联
链接地址：http://6mz.cn/article/cooihe.html