今天分享一段优质 小程序 代码片段,最常规且最常用的长按图片识别二维码的打开方式。
<image src="../../images/wxCode.jpg" mode="widthFix" show-menu-by-longpress="{{true}}"/>
分享原因
这段代码是典型的微信小程序图片组件的用法,很简单却十分常用,有必要记录分享一下。
通过 mode 和 show-menu-by-longpress 属性的设置,呈现了小程序中对图片显示方式和图片交互方式的精细简单控制。
代码解析
1. show-menu-by-longpress="{{true}}"
show-menu-by-longpress 属性,用于控制当用户长按图片时是否显示菜单,默认是false。
在项目中,如果有长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序(若图片中包含对应二维码或小程序码)的需求时,可以直接去使用该属性。
{{true}} 是数据绑定的表达式,表示该属性��值为真,即允许长按显示菜单。
2. mode="widthFix"
mode属性用于控制图片的缩放模式。
这里放几个比较常用的属性值:
scaleToFill,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素。
aspectFit,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
aspectFill,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
widthFix,宽度不变,高度自动变化,保持原图宽高比不变。
heightFix,高度不变,宽度自动变化,保持原图宽高比不变。