您好,登錄后才能下訂單哦!
這篇文章主要介紹微信小程序中Button組件的使用示例,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
微信小程序原生存在Button組件,而且樣式也不丑,拓展屬性也很多,只要去看文檔,一邊看一邊試,還是很容易構(gòu)造一個(gè)理想的按鈕Button出來(lái)。微信小程序Button傳送門(mén)。
但是某些時(shí)候可能也會(huì)覺(jué)得原生Button組件配置過(guò)于復(fù)雜,或者并不滿足當(dāng)前需求,那么就可能需要自定義一個(gè)Button組件了。
比如想要這樣的效果。
擁有五種不同的顏色
擁有三種不同的大小
擁有鏤空效果
可以圓角
可以禁用
可以設(shè)置圖標(biāo)
首先打開(kāi)編輯器,這里就打開(kāi)微信開(kāi)發(fā)者工具吧,然后創(chuàng)建一個(gè)組件,像這樣
我這里用的是Vscode然后用到了less,和easyLess插件自動(dòng)編譯less為wxss樣式。
結(jié)構(gòu)中需要注意:
文字應(yīng)該居中顯示,所以此處可能需要使用flex布局方便些
需要預(yù)留圖標(biāo)位置,沒(méi)有設(shè)置時(shí),則不顯示
需要設(shè)置背景顏色控制選項(xiàng)
注意結(jié)構(gòu)和樣式對(duì)應(yīng)即可
<button class="pm-button pm-button--{{size}} pm-button--{{type}} {{plain?'pm-button--plain':''}} {{round?'pm-button--round':''}} {{disabled?'pm-button--disabled':''}}" style="{{cStyle}}" bindtap="clickHandler" > <pm-icon icon="{{icon}}" color="{{iconColor}}" size="{{iconSize}}" wx:if="{{icon}}"></pm-icon> <slot/> </button>
.pm-button { border-radius: 0; font-weight: normal; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; white-space: nowrap; } .pm-button:not([size='mini']) { width: 0; } .pm-button--normal { width: 80px !important; height: 40px; font-size: 16px; } .pm-button--normal.pm-button--round { border-radius: 40px; } .pm-button--small { width: 60px !important; height: 30px; font-size: 14px; } .pm-button--small.pm-button--round { border-radius: 30px; } .pm-button--mini { width: 40px !important; height: 20px; font-size: 12px; } .pm-button--mini.pm-button--round { border-radius: 20px; } .pm-button--primary { background-color: #1989fa; border: 1px solid #1989fa; color: white; } .pm-button--primary.pm-button--plain { color: #1989fa; } .pm-button--success { background-color: #07c160; border: 1px solid #07c160; color: white; } .pm-button--success.pm-button--plain { color: #07c160; } .pm-button--danger { background-color: #ee0a24; border: 1px solid #ee0a24; color: white; } .pm-button--danger.pm-button--plain { color: #ee0a24; } .pm-button--warning { background-color: #ff976a; border: 1px solid #ff976a; color: white; } .pm-button--warning.pm-button--plain { color: #ff976a; } .pm-button--default { background-color: #ffffff; border: 1px solid #ebedf0; color: black; } .pm-button--primary:active, .pm-button--success:active, .pm-button--danger:active, .pm-button--warning:active, .pm-button--default:active { opacity: 0.8; } .pm-button--default:active { background-color: #ebedf0; } .pm-button--plain { background-color: transparent; } .pm-button--plain:active { opacity: 1!important; background-color: #ebedf0; } .pm-button--disabled { opacity: 0.6; } .pm-button--disabled:active { opacity: 0.6 !important; } .pm-button--disabled.pm-button--plain:active, .pm-button--disabled.pm-button--default:active { background-color: transparent; }
Component({ /** * 組件的屬性列表 */ properties: { size: { type: String, value: 'normal' }, type: { type: String, value: 'primary' }, plain: Boolean, disabled: Boolean, round: Boolean, cStyle: String, icon: String, iconColor: String, iconSize: String }, /** * 組件的方法列表 */ methods: { clickHandler() { !this.data.disabled && this.triggerEvent('click', {}) } } })
以上是“微信小程序中Button組件的使用示例”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。