寫微信小程序項目，有時候會遇到按鈕button組件狀態(tài)樣式顯示問題，以下寫出一些自己的心得體會。
雖然button組件有自己的type顏色值，但是大多數(shù)情況下，按鈕狀態(tài)顏色是定制開發(fā)的，那么當按鈕禁用或啟用時，我們怎么隨心所欲的去控制按鈕的樣式呢？
disabledDdefault.png
若想顯示自定義的樣式，如當可用時橙底白字，禁用時灰底白字。
enabled.png
disabled.png
wxss樣式：
//botton的基本樣式
.formContbutton.submitBtn{
margin-top:60rpx;
width:100%;
height:100rpx;
display:flex;
justify-content:center;
align-items:center;
font-size:32rpx;
font-weight:bold;
}
//botton的啟用樣式
.formContbutton.active{
color:#fff !important;
background:#ff9537 !important;
}
//botton的禁用樣式
.formContbutton.gray{
color:#fff !important;
background:#d9d9d9 !important;
}
wxml內(nèi)容：
<button formType="submit"disabled='{{!phone}}'class="submitBtn {{phone!=''?'active':'gray'}}">立即新增</button>
1、加上!important是為了將樣式設(shè)為最高級別；
2、用phone變量來判斷當前按鈕是否禁用，進而判斷是用什么狀態(tài)樣式；
3、wxss類名要寫在一個class里面，否則只有后面的類名樣式才會生效喔。
希望我的一點點心得可以幫助到大家ヾ(@▽@)ノ
