微信小程序 Button 組件詳解及簡(jiǎn)單實(shí)例
微信小程序 Button
相關(guān)文章:
實(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)文章
微信小程序 實(shí)戰(zhàn)程序簡(jiǎn)易新聞的制作
這篇文章主要介紹了微信小程序 實(shí)戰(zhàn)程序簡(jiǎn)易新聞的制作的相關(guān)資料,需要的朋友可以參考下2017-01-01微信小程序 支付功能開發(fā)錯(cuò)誤總結(jié)
這篇文章主要介紹了微信小程序 支付功能開發(fā)錯(cuò)誤總結(jié)的相關(guān)資料,需要的朋友可以參考下2017-02-02Three.js引用和環(huán)境搭建過(guò)程詳解
這篇文章主要為大家介紹了Three.js引用和環(huán)境搭建過(guò)程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05JS前端實(shí)現(xiàn)fsm有限狀態(tài)機(jī)實(shí)例詳解
這篇文章主要為大家介紹了JS前端實(shí)現(xiàn)fsm有限狀態(tài)機(jī)實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09微信小程序 網(wǎng)絡(luò)請(qǐng)求(post請(qǐng)求,get請(qǐng)求)
這篇文章主要介紹了微信小程序 網(wǎng)絡(luò)請(qǐng)求(post請(qǐng)求,get請(qǐng)求)的相關(guān)資料,需要的朋友可以參考下2017-01-01JavaScript前端學(xué)算法題解LeetCode最大重復(fù)子字符串
這篇文章主要為大家介紹了JavaScript前端學(xué)算法題解LeetCode最大重復(fù)子字符串,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09