微信小程序 Button
“專業(yè)、務(wù)實(shí)、高效、創(chuàng)新、把客戶的事當(dāng)成自己的事”是我們每一個(gè)人一直以來堅(jiān)持追求的企業(yè)文化。 創(chuàng)新互聯(lián)是您可以信賴的網(wǎng)站建設(shè)服務(wù)商、專業(yè)的互聯(lián)網(wǎng)服務(wù)提供商! 專注于網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、軟件開發(fā)、設(shè)計(jì)服務(wù)業(yè)務(wù)。我們始終堅(jiān)持以客戶需求為導(dǎo)向,結(jié)合用戶體驗(yàn)與視覺傳達(dá),提供有針對性的項(xiàng)目解決方案,提供專業(yè)性的建議,創(chuàng)新互聯(lián)建站將不斷地超越自我,追逐市場,引領(lǐng)市場!
相關(guān)文章:
微信小程序 Button
微信小程序 radio
微信小程序 slider
微信小程序 switch
微信小程序 textarea
微信小程序 picker-view
微信小程序 picker
微信小程序 label
微信小程序 input
微信小程序 form
微信小程序 checkbox
實(shí)現(xiàn)實(shí)例效果圖:
屬性名 | 類型 | 默認(rèn)值 | 說明 |
---|---|---|---|
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 | 無 | 有效值:submit, reset,用于form組件,點(diǎn)擊分別會(huì)觸發(fā)submit/reset事件 |
hover-class | String | button-hover | 指定按鈕按下去的樣式類。當(dāng)hover-class="none"時(shí),沒有點(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)
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
網(wǎng)站名稱:微信小程序Button組件詳解及簡單實(shí)例
瀏覽路徑:http://muchs.cn/article14/pipoge.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供、軟件開發(fā)、用戶體驗(yàn)、手機(jī)網(wǎng)站建設(shè)、微信公眾號、搜索引擎優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)