字节跳动小程序开发组件文档 button

由 卓别林 创建, 最后一次修改 2019-08-09

按钮。

属性名 类型 默认值 说明 最低版本
size String default 按钮的大小
type String default 按钮的样式类型
disabled Boolean false 是否禁用
loading Boolean false 是否带loading图标
form-type String 用于嵌在<form/>组件中,控制submit/reset
open-type String 用于调用开放能力
hover-class String button-hover 点击状态的样式类
hoverStartTime Number 20 按住后多久出现点击态,单位毫秒
hoverStayTime Number 70 手指松开后点击态保留时间,单位毫秒
hover-stop-propagation Boolean false 指定是否阻止本节点的祖先节点出现点击态
bindgetphonenumber eventHandler n/a 获取用户手机号回调,只在 open-type=getPhoneNumber时有效 1.14.0
button-hover的样式为为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}

size取值范围:

说明
default 默认大小
mini 小尺寸

type取值范围:

说明
primary 红色
default 白色

form-type取值范围:

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

open-type有效值:

说明 最低版本
share 触发用户转发, 分享内容到微头条
getPhoneNumber 获取用户手机号,可以从bindgetphonenumber回调中获取到用户信息,详细说明 1.14.0

示例


开发者工具中预览

<button type="primary">页面主操作 Normal</button>
<button type="primary" loading="true">页面主操作 Loading</button>
<button type="primary" disabled="true">页面主操作 Disabled</button>

<button type="default">页面次要操作 Normal</button>
<button type="default" loading="true">页面次要操作 Loading</button>
<button type="default" disabled="true">页面次要操作 Disabled</button>

<view class="mini-buttons">
    <button class="mini-btn" type="primary" size="mini">按钮</button>
    <button class="mini-btn" type="default" size="mini">按钮</button>
</view>

温馨提示


目前,<button>组件的边框不是通过border属性来控制的,而是有个:after伪类,所以如果需要修改边框样式,请对改伪类元素设置样式

<button class="my-button">边框修改</button>
<button class="my-button-2">取消默认边框</button>
.my-button {
    border-radius: 20px;
}
.my-button:after {
    border-color: #f00;
    border-radius: 40px; /* 需要设置为按钮圆角的两倍 */
}

.my-button-2 {
    border: 1px solid;
}
.my-button-2:after {
    display: none;
}


以上内容是否对您有帮助:
二维码
建议反馈
二维码