微信小程序实现图片放大预览效果
可以直接用微信程序自己的api很方便的实现
核心方法 wx.previewImage:
直接上代码,
wxml:
<!--pages/prewpicture/prew.wxml--> <image src="{{imgList[0]}}" bindtap="imgYu" data-src="{{imgList[0]}}"></image> <image src="{{imgList[1]}}" bindtap="imgYu" data-src="{{imgList[1]}}"></image> <image src="{{imgList[2]}}" bindtap="imgYu" data-src="{{imgList[2]}}"></image>
js:
// pages/prewpicture/prew.js Page({ /** * 页面的初始数据 */ data: { imgList: [ "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=508387608,2848974022&fm=26&gp=0.jpg", "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3139953554,3011511497&fm=26&gp=0.jpg", "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1022109268,3759531978&fm=26&gp=0.jpg" ] }, imgYu: function (event) { console.log(event.currentTarget.dataset.src) var src = event.currentTarget.dataset.src;//获取data-src var imgList = event.currentTarget.dataset.list;//获取data-list //图片预览 wx.previewImage({ current: src, // 当前显示图片的http链接 urls: this.data.imgList // 需要预览的图片http链接列表 }) } })
json和wxss用默认的就好。
参考链接:
1. https://www.jianshu.com/p/0d23ea016a83
2. https://blog.csdn.net/weixin_42694072/article/details/83540876
个性签名:时间会解决一切