组件的共同属性
id 组件的唯一标识(整个页面唯一)
class 组件的样式类(在对应的wxss中定义的样式类)
style 组件的内联样式
hidden 组件是否显示
data-* 自定义属性(组件上触发事件时,会发送给事件处理函数)
bind*/catch* 组件的事件
text:文本
user-select 文本是否可选,该属性会使文本节点显示为inline-block行内块元素(长按可选中,默认为false)
space 显示连续空格
decode 是否解码(是否将特殊字符解码,默认值为false)
space的合法值
- ensp 中文字符空格一半大小
- emsp 中文字符空格大小
- nbsp 根据字体设置的空格大小
注意:
- decode可以解析 > < &   '  
- text组件内只支持text嵌套
button:按钮
size 按钮的大小(default:默认大小,占满一行; mini:小尺寸)
type 按钮的样式类型(primary:绿色; default:白色; warn:红色)
plain 按钮是否镂空,背景色透明(默认值false)
disabled 是否禁用(默认值false)
hover-class 指定按钮按下去的样式类,当hover-class="none"时,没有点击效果
view:视图容器
view为块级元素,独占一行,通常用作容器组件
hover-class 指定按下去的样式类
image:图片
支持jpg、png、svg、webp、gif等格式
image组件可以写成单标签,也可以写成双标签
image组件是一个行内块级元素
src 图片资源地址
mode 图片裁剪、缩放的模式(默认值scaleToFill)
webp 默认不解析webp格式,只支持网络资源
lazy-load 图片懒加载,在即将进入一定范围时(上下三屏,手机屏幕在中间,即三个屏幕范围)才开始加载
show-menu-by-longpress 开启长按图片显示识别小程序码菜单
binderror 当错误发生时触发
bindload 当图片加载完毕时触发
mode的合法值
scaleToFill 不保持纵横比缩放图片,使图片宽高完全拉伸至填满image元素
aspectFit 保持纵横比缩放图片,使图片的长边能完全显示出来
aspectFill 保持纵横比缩放图片,只保证图片的短边能完全显示出来
top 裁剪模式,不缩放图片,只显示图片的顶部区域
bottom 裁剪模式,不缩放图片,只显示图片的底部区域
center 裁剪模式,不缩放图片,只显示图片的中间区域
left 裁剪模式,不缩放图片,只显示图片的左边区域
right 裁剪模式,不缩放图片,只显示图片的右边区域
top left 裁剪模式,不缩放图片,只显示图片的左上边区域
top right 裁剪模式,不缩放图片,只显示图片的右上边区域
bottom left 裁剪模式,不缩放图片,只显示图片的左下边区域
bottom right 裁剪模式,不缩放图片,只显示图片的右下边区域
注意:
- image组件默认宽度为320px、高度240px
- image组件中不支持二维码/小程序码图片长按识别,仅在wx.previewImage中支持长按识别
input:输入框
type input的类型(text:web; number:数字; idcard:身份证; digit:带小数点的数字)
value 输入框的初始内容
password 是否是密码类型
placeholder 输入框为空时占位符
disabled 是否禁用
maxlength 最大输入长度,设置为-1的时候不限制最大长度(默认值140)
focus 获取焦点
confirm-type 设置键盘右下角的文字,仅在type="text"时生效(send:右下角按钮为发送; search:搜索; next:下一个; go:前往; done:完成
adjust-position 键盘弹起时,是否自动上推页面
注意:
confirm-type的最终表现与手机输入法本身的实现有关,部分安卓系统可能不支持
input组件是原生组件,字体是系统字体,无法设置font-family
scroll-view:可滚动视图区域
页面滚动并不需要scroll-view,通常用来实现局部滚动
使用竖向滚动时,需要给scroll-view一个固定高度,通过wxss设置height
scroll-x 允许横行滚动
scroll-y 允许纵向滚动