微信小程序 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組件,點擊分別會觸發submit/reset事件 |
| hover-class | String | button-hover | 指定按鈕按下去的樣式類。當hover-class="none"時,沒有點擊態效果 |
注:button-hover默認為{background-color:rgba(0,0,0,0.1);opacity:0.7;}
示例代碼:
/** wxss **//** 修改button默認的點擊態樣式類**/.button-hover{ background-color:red;}/** 添加自定義button點擊態樣式類**/.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)感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
新聞熱點
疑難解答