第一步:在wxml中定义image组件,并设置绑定事件。
<image src="{{priceUrl}}" bindtap="imgClick"></image>
第二步:在js中设置需要预览图片的URL数组,切记一定要是数组,即使一张图也要是数组,不能直接字符串赋值。
2.1 data数据设置
data: {
priceUrl:["cloud://7gerby6t527c7bca.6368-charming815-7gerby6t527c7bca-1316371082/dywfly/price.png"],
},//需要换成自己的图片链接
2.2 绑定事件函数编制
imgClick:function(){
var imgUrl = this.data.priceUrl;
console.log('imgClick success',imgUrl)
wx.previewImage({
urls: imgUrl,//imgUrl 必须是需要预览的图片链接列表,只有一张图片也需要是列表
success:(res=>{
console.log('接口调用成功',res)
})
})
},
3.wx.previewImage组件官方调用指南
文章来源:https://www.toymoban.com/news/detail-504870.html
4、效果预览
文章来源地址https://www.toymoban.com/news/detail-504870.html
到了这里,关于微信小程序点击图片放大预览,新页面中全屏预览图片的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!