微信小程序 Button 組件詳解及簡單實例
更新時間:2017年01月10日 14:24:39 投稿:lqh
這篇文章主要介紹了微信小程序 Button 組件詳解及簡單實例的相關資料,需要的朋友可以參考下
微信小程序 Button
相關文章:
實現實例效果圖:
屬性名 | 類型 | 默認值 | 說明 |
---|---|---|---|
size | String | default | 有效值default, mini |
type | String | default | 按鈕的樣式類型,有效值primary, default, warn |
plain | Boolean | false | 按鈕是否鏤空,背景色透明 |
disabled | Boolean | false | 是否禁用 |
loading | Boolean | false | 名稱前是否帶 loading 圖標 |
formType | String | 無 | 有效值:submit, reset,用于form組件,點擊分別會觸發(fā)submit/reset事件 |
hover-class | String | button-hover | 指定按鈕按下去的樣式類。當hover-class="none"時,沒有點擊態(tài)效果 |
注:button-hover默認為{background-color:rgba(0,0,0,0.1);opacity:0.7;}
示例代碼:
/** wxss **/ /** 修改button默認的點擊態(tài)樣式類**/ .button-hover{ background-color:red; } /** 添加自定義button點擊態(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">點擊設置以上按鈕disabled屬性</button> <button bindtap="setPlain">點擊設置以上按鈕plain屬性</button> <button bindtap="setLoading">點擊設置以上按鈕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)
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
相關文章
JavaScript前端學算法題解LeetCode最大重復子字符串
這篇文章主要為大家介紹了JavaScript前端學算法題解LeetCode最大重復子字符串,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-09-09