自己码了个微信小程序图片全屏预览组件,并解决了svg真机显示黑屏问题(即png等格式可以正常显示,但就svg无法显示)。
/*** 微信小程序图片预览组件* 1.支持预览svg、png、jpeg、jpg、bmp等小程序支持的格式,* 支持保存图片到本地,支持双指缩放,单指拖动,* 支持本地图片、网络图片、小程序云存储图片。* 2.不会存在小程序官方提供的全屏预览接口(https://developers./miniprogram/dev/api/media/image/wx.previewImage.html)* 出现的svg预览咱部分真机上不显示的问题。* 3.作者:crysu* 4.作者博客:* 5.作者邮箱:zbshr@*/
属性说明
属性名 默认值类型 说明 必填imgUrl[]Array图片地址的数组 是imgPos0 Number组件加载时默认加载哪张图片,默认为0,即imgUrl数组的第一个否showImgFlagtrue Boolean 显示/隐藏组件的控制器,true为显示,false为隐藏 否scaleMin 0.2 String图片缩放最小倍数 否scaleMax 20String图片缩放最大倍数 否scaleDefault 2 String图片缩放默认倍数 否contentBackgroundColor rgba(0,0,0,0.6) String组件页面背景色 否 imgBackgroundColor rgba(0,0,0,0.0) String图片背景色 否
引用示例:
首先在小程序根目录创建名为Component的文件夹,然后把源码(文章末尾有链接)文件中的imgPreview文件夹放到Component中
然后在需要引入组件的页面写入以下代码
json:
"usingComponents": {"showImg": "/Component/imgPreview/imgPreview"}
wxml:
这里的话,imgUrl这个属性是必须的,其他的可以不要
<showImg imgUrl="{{imgUrl}}" imgPos="{{imgPos}}"></showImg>
wxss:
无
js:
data: {imgUrl: ["/test/419101938_8567.svg","/test/333.png","./img/md-chevron_left.svg","cloud://yiyi-62qxe.7969-yiyi-62qxe-1257035987/1564989457044.jpg"],imgPos: 0,showImgFlag: false,scaleMin: "0.2",scaleMax: "20",scaleDefault: "2",contentBackgroundColor: "rgba(0, 0, 0, 0.6)",imgBackgroundColor: "rgba(0, 0, 0, 0)"},
效果:
组件源码:
/b09rxx77c
密码:a4m7
如果觉得《微信小程序图片全屏预览组件 并解决svg真机显示黑屏问题》对你有帮助,请点赞、收藏,并留下你的观点哦!