在php中图片放大怎么实现,微信小程序实现图片放大预览功能

本文详细介绍了如何在微信小程序中实现图片点击放大预览,通过js代码利用data-src和data-list自定义属性,配合wx.previewImage接口,实现左右滑动切换图片功能。适合小程序开发者学习和参考。
摘要由CSDN通过智能技术生成

需求:当点击图片时,当前图片放大预览,且可以左右滑动

2f5c96bfac48698ae8e226598bdec066.png

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

a84dec1062b9f7a40f791bf7f86a2c3b.png

我们可以看到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接口 里面即可

效果图片如下:可以左右滑动上一张下一张

f402e9b2e582e349f1174194f738d594.png

更多内容可以查看:微信小程序教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值