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

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

创新互联公司主要从事做网站、成都做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务集美,十余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务: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://scyanting.com/article/cooihe.html