欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序 Button 組件詳解及簡(jiǎn)單實(shí)例

 更新時(shí)間:2017年01月10日 14:24:39   投稿:lqh  
這篇文章主要介紹了微信小程序 Button 組件詳解及簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下

微信小程序 Button

相關(guān)文章:

微信小程序 Button

微信小程序 radio

微信小程序 slider

微信小程序 switch

微信小程序 textarea

微信小程序 picker-view

微信小程序 picker

微信小程序 label

微信小程序 input 

微信小程序 form

微信小程序 checkbox

實(shí)現(xiàn)實(shí)例效果圖:

屬性名 類型 默認(rèn)值 說(shuō)明
size String default 有效值default, mini
type String default 按鈕的樣式類型,有效值primary, default, warn
plain Boolean false 按鈕是否鏤空,背景色透明
disabled Boolean false 是否禁用
loading Boolean false 名稱前是否帶 loading 圖標(biāo)
formType String 無(wú) 有效值:submit, reset,用于form組件,點(diǎn)擊分別會(huì)觸發(fā)submit/reset事件
hover-class String button-hover 指定按鈕按下去的樣式類。當(dāng)hover-class="none"時(shí),沒(méi)有點(diǎn)擊態(tài)效果

注:button-hover默認(rèn)為{background-color:rgba(0,0,0,0.1);opacity:0.7;}

示例代碼:

/** wxss **/
/** 修改button默認(rèn)的點(diǎn)擊態(tài)樣式類**/
.button-hover{
 background-color:red;
}
/** 添加自定義button點(diǎn)擊態(tài)樣式類**/
.other-button-hover{
 background-color:blur;
}
<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">點(diǎn)擊設(shè)置以上按鈕disabled屬性</button>
<button bindtap="setPlain">點(diǎn)擊設(shè)置以上按鈕plain屬性</button>
<button bindtap="setLoading">點(diǎn)擊設(shè)置以上按鈕loading屬性</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)

感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!

相關(guān)文章

最新評(píng)論