• button

    button

    按钮。

    属性说明

    属性名类型默认值说明生效时机平台差异说明
    sizeStringdefault按钮的大小
    typeStringdefault按钮的样式类型
    plainBooleanfalse按钮是否镂空,背景色透明
    disabledBooleanfalse是否禁用
    loadingBooleanfalse名称前是否带 loading 图标app-nvue 平台,在 ios 上为雪花,Android上为圆圈
    form-typeString用于 <form> 组件,点击分别会触发 <form> 组件的 submit/reset 事件
    open-typeString开放能力
    hover-classStringbutton-hover指定按钮按下去的样式类。当 hover-class="none" 时,没有点击态效果
    hover-start-timeNumber20按住后多久出现点击态,单位毫秒
    hover-stay-timeNumber70手指松开后点击态保留时间,单位毫秒
    @getuserinfoHandler用户点击该按钮时,会返回获取到的用户信息,从返回参数的detail中获取到的值同uni.getUserInfoopen-type="getUserInfo"微信小程序
    • 注1:button-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}size 有效值
    说明
    default默认大小
    mini小尺寸

    type 有效值

    说明
    primary微信小程序为绿色,5+App、百度小程序、支付宝小程序为蓝色,头条小程序为红色
    default白色
    warn红色

    form-type 有效值

    说明
    submit提交表单
    reset重置表单

    open-type 有效值

    说明平台差异说明
    feedback打开“意见反馈”页面,用户可提交反馈内容并上传日志5+App、微信小程序
    share触发用户转发微信小程序、百度小程序、支付宝小程序、头条小程序
    getUserInfo获取用户信息,可以从@getuserinfo回调中获取到用户信息,包括手机号、头像、昵称等信息微信小程序、百度小程序
    contact打开客服会话,如果用户在会话中点击消息卡片后返回应用,可以从 @contact 回调中获得具体信息微信小程序
    getPhoneNumber获取用户手机号,可以从@getphonenumber回调中获取到用户信息微信小程序、百度小程序、头条小程序
    launchApp打开APP,可以通过app-parameter属性设定向APP传的参数微信小程序
    openSetting打开授权设置页微信小程序、百度小程序
    getAuthorize支持小程序授权支付宝小程序
    contactShare分享到通讯录好友支付宝小程序
    lifestyle关注生活号支付宝小程序

    注意

    • 在小程序中,开发者可以登录 小程序管理后台 后进入左侧菜单“客服反馈”页面获取反馈内容。
    • 在 App 中,开发者登录 DCloud开发者中心 后点击应用名称,进入左侧菜单“用户反馈”页面获取反馈内容。
    • 点击 share 分享按钮时会触发 onShareAppMessage
    • 支付宝小程序平台,获取用户手机号时,建议先通过条件编译的方式,调用支付宝原生API,参考示例
    1. <template>
    2. <view>
    3. <view class="uni-padding-wrap uni-common-mt">
    4. <button type="primary">页面主操作 Normal</button>
    5. <button type="primary" loading="true">页面主操作 Loading</button>
    6. <button type="primary" disabled="true">页面主操作 Disabled</button>
    7. <button type="default">页面次要操作 Normal</button>
    8. <button type="default" disabled="true">页面次要操作 Disabled</button>
    9. <button type="warn">警告类操作 Normal</button>
    10. <button type="warn" disabled="true">警告类操作 Disabled</button>
    11. <view class="button-sp-area">
    12. <button type="primary" plain="true">按钮</button>
    13. <button type="primary" disabled="true" plain="true">不可点击的按钮</button>
    14. <button type="default" plain="true">按钮</button>
    15. <button type="default" disabled="true" plain="true">按钮</button>
    16. <button class="mini-btn" type="primary" size="mini">按钮</button>
    17. <button class="mini-btn" type="default" size="mini">按钮</button>
    18. <button class="mini-btn" type="warn" size="mini">按钮</button>
    19. </view>
    20. </view>
    21. </view>
    22. </template>

    uniapp


    发现错误?想参与编辑?在 GitHub 上编辑此页面!