button(按钮)
常用属性介绍:
size属性(按钮的大小):
值 | 说明 |
---|---|
default | 默认大小 |
mini | 小尺寸 |
显示效果:
type(按钮的样式类型)
值 | 说明 |
---|---|
default(默认) | 白色 |
warn | 红色(type属性为warn 一般用于需要慎重点击的按钮) |
primary | 微信小程序为绿色,App、H5、百度小程序、支付宝小程序为蓝色,字节跳动小程序为红色,QQ小程序为浅蓝 |
显示效果:(此处为微信小程序)
plain (按钮是否镂空,背景色透明)
值 | 说明 |
---|---|
false(默认) | 不镂空 |
true | 镂空 |
plain属性为false的时候可以省略
显示效果
disabled(是否禁用)
App-nvue 平台,在 ios 上为雪花,Android上为圆圈
值 | 说明 |
---|---|
false(默认) | 不禁用 |
true | 禁用 |
disabled属性为false的时候可以省略
显示效果:(此时type为default‘默认’;你也可以尝试其它)
loading(名称前是否带loading图标)
值 | 说明 |
---|---|
false(默认) | 不带loading图标 |
true | 带loading图标 |
显示效果:(此时type为‘primary ;你也可以尝试其它)
form-type(用于 <form>
组件,点击分别会触发 <form>
组件的 submit/reset
事件)
值 | 说明 |
---|---|
submit (默认) | 提交表单 |
reset | 重置表单 |
open-type(开放能力)
值 | 说明 | 平台 |
---|---|---|
feedback | 打开“意见反馈”页面,用户可提交反馈内容并上传日志 | App、微信小程序、QQ小程序 |
share | 触发用户转发 | 微信小程序、百度小程序、支付宝小程序、字节跳动小程序、QQ小程序 |
getUserInfo | 获取用户信息,可以从@getuserinfo回调中获取到用户信息,包括手机号、头像、昵称等信息 | 微信小程序、百度小程序、QQ小程序 |
contact | 打开客服会话,如果用户在会话中点击消息卡片后返回应用,可以从 @contact 回调中获得具体信息 | 微信小程序、百度小程序 |
getPhoneNumber | 获取用户手机号,可以从@getphonenumber回调中获取到用户信息 | 微信小程序、百度小程序、字节跳动小程序 |
launchApp | 打开APP,可以通过app-parameter属性设定向APP传的参数 | 微信小程序、QQ小程序 |
openSetting | 打开授权设置页 | 微信小程序、百度小程序 |
getAuthorize | 支持小程序授权 | 支付宝小程序 |
contactShare | 分享到通讯录好友 | 支付宝小程序 |
lifestyle | 关注生活号 | 支付宝小程序 |
openGroupProfile | 呼起QQ群资料卡页面,可以通过group-id属性设定需要打开的群资料卡的群号,同时manifest中必须配置groupIdList | QQ小程序基础库1.4.7版本+ |
以上表格内容来自uni-app官网button组件
以下button组件的属性可自行尝试
属性名 | 类型 | 默认值 | 说明 | 生效时机 | 平台差异说明 |
---|---|---|---|---|---|
hover-clas |