写微信小程序项目,有时候会遇到按钮button组件状态样式显示问题,以下写出一些自己的心得体会。
虽然button组件有自己的type颜色值,但是大多数情况下,按钮状态颜色是定制开发的,那么当按钮禁用或启用时,我们怎么随心所欲的去控制按钮的样式呢?
若想显示自定义的样式,如当可用时橙底白字,禁用时灰底白字。
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内容:
<button formType="submit"disabled='{{!phone}}'class="submitBtn {{phone!=''?'active':'gray'}}">立即新增</button>
1、加上!important是为了将样式设为最高级别;
2、用phone变量来判断当前按钮是否禁用,进而判断是用什么状态样式;
3、wxss类名要写在一个class里面,否则只有后面的类名样式才会生效喔。
希望我的一点点心得可以帮助到大家ヾ(@▽@)ノ