微信小程序按钮button样式

写微信小程序项目,有时候会遇到按钮button组件状态样式显示问题,以下写出一些自己的心得体会。
虽然button组件有自己的type颜色值,但是大多数情况下,按钮状态颜色是定制开发的,那么当按钮禁用或启用时,我们怎么随心所欲的去控制按钮的样式呢?

disable属性为true的状态下,按钮默认样式为浅灰底深灰字。
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内容:
<button formType="submit"disabled='{{!phone}}'class="submitBtn {{phone!=''?'active':'gray'}}">立即新增</button>
 1、加上!important是为了将样式设为最高级别;

 2、用phone变量来判断当前按钮是否禁用,进而判断是用什么状态样式;

 3、wxss类名要写在一个class里面,否则只有后面的类名样式才会生效喔。

希望我的一点点心得可以帮助到大家ヾ(@@)ノ

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 13,735评论 3 184
  • 使用sketch最重要的一点是设计好控件的规范。 为做好设计规范需要对色彩进行编号,比如:color_a”_1,c...
    youyeath阅读 26,493评论 2 237
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,050评论 3 119
  • 2018-9-23 姓名:郭祥华 组别:315期六项精进努力一组 【日精进打卡第312】 【知~学习】 背诵《六项...
    华英雄_712d阅读 1,462评论 0 0
  • 听书《增长黑客》《数据思维》 和学姐吃饭听到很多东西 给广西恩城自然保护区做了个logo,我还挺喜欢。之前给保护区...
    子茵Lynn阅读 975评论 0 0