微信小程序按鈕組件button,微信小程序按鈕實例
2017-12-22
導(dǎo)讀:button 按鈕。 屬性名 類型 默認值 說明 最低版本 size String default 按鈕的大小 type String default 按鈕的樣式類型 plain Boolean false 按鈕是否鏤空,背景色透明 disabled Boolean false 是否禁用 loadi...
button
按鈕。
屬性名 | 類型 | 默認值 | 說明 | 最低版本 |
---|---|---|---|---|
size | String | default | 按鈕的大小 | |
type | String | default | 按鈕的樣式類型 | |
plain | Boolean | false | 按鈕是否鏤空,背景色透明 | |
disabled | Boolean | false | 是否禁用 | |
loading | Boolean | false | 名稱前是否帶 loading 圖標(biāo) | |
form-type | String |
用于 <form/> 組件,點擊分別會觸發(fā) <form/> 組件的 submit/reset 事件 |
||
open-type | String | 微信開放能力 | 1.1.0 | |
hover-class | String | button-hover |
指定按鈕按下去的樣式類。當(dāng) hover-class="none" 時,沒有點擊態(tài)效果 |
|
hover-start-time | Number | 20 | 按住后多久出現(xiàn)點擊態(tài),單位毫秒 | |
hover-stay-time | Number | 70 | 手指松開后點擊態(tài)保留時間,單位毫秒 | |
session-from | String | open-type="contact"時有效:用戶從該按鈕進入會話時,開發(fā)者將收到帶上本參數(shù)的事件推送。本參數(shù)可用于區(qū)分用戶進入客服會話的來源。 | 1.4.0 | |
bindgetuserinfoHandler |
Handler |
open-type="getUserInfo"時有效:用戶點擊該按鈕時,會返回獲取到的用戶信息,從返回參數(shù)的detail中獲取到的值同wx.getUserInfo |
1.3.0 |
size 有效值:
值 | 說明 |
---|---|
default | |
mini |
type 有效值:
值 | 說明 |
---|---|
primary | |
default | |
warn |
form-type 有效值:
值 | 說明 |
---|---|
submit | 提交表單 |
reset | 重置表單 |
open-type 有效值:
值 | 說明 | 最低版本 |
---|---|---|
contact | 打開客服會話 | 1.1.0 |
share | 觸發(fā)用戶轉(zhuǎn)發(fā),使用前建議先閱讀使用指引 | 1.2.0 |
getUserInfo | 獲取用戶信息,可以從bindgetuserinfo回調(diào)中獲取到用戶信 | 1.3.0 |
示例代碼:
/** wxss **/
/** 修改button默認的點擊態(tài)樣式類**/
.button-hover {
background-color: red;
}
/** 添加自定義button點擊態(tài)樣式類**/
.other-button-hover {
background-color: blue;
}
<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}"
disabled="{{disabled}}" bindtap="default" hover-class="other-button-hover"> default </button>
<button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}"
disabled="{{disabled}}" bindtap="primary"> primary </button>
<button type="warn" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}"
disabled="{{disabled}}" bindtap="warn"> warn </button>
<button bindtap="setDisabled">點擊設(shè)置以上按鈕disabled屬性</button>
<button bindtap="setPlain">點擊設(shè)置以上按鈕plain屬性</button>
<button bindtap="setLoading">點擊設(shè)置以上按鈕loading屬性</button>
<button open-type="contact">進入客服會話</button>
var types = ['default', 'primary', 'warn']
var pageObject = {
data: {
defaultSize: 'default',
primarySize: 'default',
warnSize: 'default',
disabled: false,
plain: false,
loading: false
},
setDisabled: function(e) {
this.setData({
disabled: !this.data.disabled
})
},
setPlain: function(e) {
this.setData({
plain: !this.data.plain
})
},
setLoading: function(e) {
this.setData({
loading: !this.data.loading
})
}
}
for (var i = 0; i < types.length; ++i) {
(function(type) {
pageObject[type] = function(e) {
var key = type + 'Size'
var changedData = {}
changedData[key] =
this.data[key] === 'default' ? 'mini' : 'default'
this.setData(changedData)
}
})(types[i])
}
Page(pageObject)
更多微信小程序開發(fā)教程,可以關(guān)注hi小程序。
第二部分:如何開通一個小商店
您可能感興趣: