微信小程序存在Button組件微信小程序原生存在Button組件，而且樣式也不丑，拓展屬性也很多，只要去看文檔，一邊看一邊試，還是很容易構(gòu)造一個理想的按鈕Button出來。
微信小程序Button傳送門。
但是某些時候可能也會覺得原生Button組件配置過于復(fù)雜，或者并不滿足當(dāng)前需求，那么就可能需要自定義一個Button組件了。
好的，開始比如想要這樣的效果。
擁有五種不同的顏色擁有三種不同的大小擁有鏤空效果可以圓角可以禁用可以設(shè)置圖標(biāo)上代碼第一步，創(chuàng)建組件首先打開編輯器，這里就打開微信開發(fā)者工具吧，然后創(chuàng)建一個組件，像這樣我這里用的是Vscode然后用到了less，和easyLess插件自動編譯less為wxss樣式。
第二步，控制結(jié)構(gòu)和樣式結(jié)構(gòu)中需要注意：
文字應(yīng)該居中顯示，所以此處可能需要使用flex布局方便些需要預(yù)留圖標(biāo)位置，沒有設(shè)置時，則不顯示需要設(shè)置背景顏色控制選項(xiàng)注意結(jié)構(gòu)和樣式對應(yīng)即可 .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'
, {
}
) }
}
}
)推薦教程：
《微信小程序》以上就是快速實(shí)現(xiàn)一個微信小程序的Button組件的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標(biāo)簽：
微信小程序本文轉(zhuǎn)載于：
簡書，如有侵犯，請聯(lián)系[email protected]刪除
上一篇：
微信小程序必知必會面試題
下一篇：
微信公眾號文章刪除不了怎么辦？相關(guān)文章相關(guān)視頻微信小程序常見的開發(fā)問題匯總微信小程序自動跳出來怎么解決？微信小程序看不了廣告怎么辦？用mpvue開發(fā)微信小程序基礎(chǔ)知識快速實(shí)現(xiàn)一個微信小程序的Button組件微信小程序事件 以及事件對象微信小程序開發(fā)工具的安裝微信小程序開發(fā)工具的安裝 [溫州做微信公眾號]