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

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

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

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

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

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

wxml代码：

<!--图片描述-->
<view wx:if="{{item.pictures}}" class="list-dImg">
<image bindtap="imgYu" data-list="{{item.pictures}}" data-src="{{dImg}}" wx:for="{{item.pictures}}" wx:for-item="dImg" src="{{dImg}}"></image>
</view>

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接口 里面即可

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

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

标题名称：小程序怎么实现图片放大预览功能-创新互联
文章网址：https://www.cdcxhl.com/article44/cooihe.html

成都网站建设公司_创新互联，为您提供App设计、电子商务、Google、网页设计公司、网站营销、云服务器

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联