button按鈕
解釋:
小程序的button按鈕，常用于與用戶交互使用椒袍。
屬性:
button屬性
| 屬性名 | 類型 | 默認(rèn)值 | 說明 | 注釋 |
|---|---|---|---|---|
| size | String | default | 按鈕的大小 | 類型String,不是Number 只有default、mini,下文有解釋 |
| type | String | default | 按鈕展示的樣式 | 下文有解釋 |
| plain | Boolean | false | 按鈕是否鏤空,背景色透明 | |
| disabled | Boolean | false | 按鈕是否禁用,不可點(diǎn)擊 | |
| loading | Boolean | false | 名稱前是否帶loading圖標(biāo) | |
| ----以上為常用---- | ||||
| form-type | String | 用于form組件的按鈕(submit/reset) | 下文有解釋 | |
| open-type | String | 微信開發(fā)能力(分享，獲取用戶信息毁靶，客服聊天) | ||
| ---button動作---- | ||||
| hover-class | String | button-hover | 按鈕按下去的樣式類，當(dāng)hover-class="none"逊移，沒有點(diǎn)擊效果 | |
| hover-stop-propagation | Boolean | false | 阻止父節(jié)點(diǎn)出現(xiàn)點(diǎn)擊態(tài) | |
| hover-start-time | Number | 20 | 按住多久出現(xiàn)點(diǎn)擊態(tài)预吆，(毫秒) | |
| hover-stay-time | Number | 20 | 松開后點(diǎn)擊保留時間,(毫秒) |
size有效值
| 值 | 說明 |
|---|---|
| default | 默認(rèn)值 |
| mini |
type有效值
| 值 | 說明 |
|---|---|
| primary | 原色值 |
| default | 默認(rèn)值 |
| warn | 警告值 |
form-type有效值
| 值 | 說明 |
|---|---|
| submit | 提交表單 |
| reset | 重置表單 |
open-type有效值
| 值 | 說明 |
|---|---|
| contact | 打開客服,需要小程序后臺配置 |
| share | 打開分享面板 |
| getUserInfo | 可以在bindgetuserinfo中回調(diào)獲取用戶信息 |
| getPhoneNumber | 可以在bindgetphonenumber回調(diào)中獲取用戶信息 |
| launchApp | 打開App 可以通過app-parameter屬性設(shè)置向app傳的參數(shù) |
展示
button展示效果
使用:
<view class="btn-area" id="buttonContainer">
<!--原色-->
<button type="primary">按鈕原色</button>
<button type="primary" loading="true">按鈕Loading</button>
<button type="primary" disabled="true">不可點(diǎn)Disabled</button>
<!--默認(rèn)-->
<button type="default">默認(rèn)值</button>
<button type="default" disabled="true">默認(rèn)值Disabled</button>
<!--警告-->
<button type="warn">警告類</button>
<button type="warn" disabled="true">警告類操作 Disabled</button>
<view class="button-sp-area">
<button type="primary" plain="true">鏤空按鈕</button>
<button type="primary" disabled="true" plain="true">不可點(diǎn)擊</button>
<button type="default" plain="true">按鈕</button>
<button type="default" disabled="true" plain="true">不可點(diǎn)按鈕</button>
<view class="mini-btn">
<button type="primary" size="mini">按鈕</button>
<button type="default" size="mini">按鈕</button>
<button type="warn" size="mini">按鈕</button>
</view>
<button type="primary" open-type="contact" session-from='BeiJing佩奇'>朋程</button>
</view>
</view>
附上資源???
小程序官方示例代碼
文中代碼均對小程序官方示例代碼做出過修改,包括添加注釋,新加代碼測試。
本文代碼示例
小程序wiki
