本文介绍按钮(button)。
属性名 |
类型 |
默认值 |
描述 |
最低版本 |
size |
String |
default |
有效值为 default、mini |
- |
type |
String |
default |
按钮的样式类型,有效值为 primary、default、warn |
- |
plain |
Boolean |
false |
是否镂空 |
- |
disabled |
Boolean |
false |
是否禁用 |
- |
loading |
Boolean |
false |
按钮文字前是否带 loading 图标 |
- |
hover-class |
String |
button-hover |
按钮按下去的样式类。hover-class="none" 时表示没有点击态效果 |
- |
hover-start-time |
Number |
20 |
按住后多少事件后出现点击状态,单位毫秒 |
- |
hover-stay-time |
Number |
70 |
手指松开后点击状态保留时间,单位毫秒 |
- |
hover-stop-propagation |
Boolean |
false |
是否阻止当前元素的祖先元素出现点击态 |
1.10.0 |
form-type |
String |
- |
有效值为 submit、reset,用于组件,点击分别会触发 submit/reset 事件 |
- |
open-type |
String |
- |
开放能力 |
1.1.0 |
scope |
String |
- |
当 open-type 为 getAuthorize 时有效 |
1.11.0 |
onTap |
EventHandle |
- |
点击 |
- |
app-parameter |
String |
- |
打开 APP 时,向 APP 传递的参数,open-type="launchApp" 时有效 |
- |
说明:button-hover
默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
。
open-type 有效值
值 |
说明 |
最低版本 |
share |
触发自定义分享,可使用 canIUse('button.open-type.share') 判断 |
1.1.0 |
getAuthorize |
支持小程序授权,可使用 canIUse('button.open-type.getAuthorize') 判断 |
1.11.0 |
contactShare |
分享到通讯录好友,可使用 canIUse('button.open-type.contactShare') 判断 |
1.11.0 |
scope 有效值
当 open-type
为 getAuthorize
时,可以设置 scope 为以下值:
图示

代码示例
<view class="page">
<view class="section">
<view class="title">Type</view>
<button type="default">default</button>
<button type="primary">primary</button>
<button type="warn">warn</button>
</view>
<view class="section" style="background:#ddd;">
<view class="title">Misc</view>
<button type="default" plain>plain</button>
<button type="default" disabled>disabled</button>
<button type="default" loading={{true}}>loading</button>
<button type="default" hover-class="red">hover-red</button>
</view>
<view class="section">
<view class="title">Size</view>
<button type="default" size="mini">mini</button>
</view>
<view class="section">
<view class="title">Type</view>
<form onSubmit="onSubmit" onReset="onReset">
<button form-type="submit">submit</button>
<button form-type="reset">reset</button>
</form>
</view>
</view>
在文档使用中是否遇到以下问题
更多建议
匿名提交