小程序模板网

微信小程序button组件自定义样式

2018-04-19 监事会

背景颜色

wxml代码

 

  1. <button class='btn' bindtap='sumbit' >确定</button>

wxss代码

 

  1. .btn {
  2. width: 90%;
  3. margin-top: 30rpx;
  4. background-color: #FFCC00;
  5. color: #FFF;
  6. }

background-color属性是修改背景颜色的,color是修改字体颜色的,这里注意:如果组件里面写 type='....',修改背景颜色会无效,例如以下代码:

 

  1. <!--修改背景颜色无效-->
  2. <button class='btn' bindtap='sumbit' type='primary'>确定</button>
 

按钮去边框

小程序里提供的button组件默认带有边框,去掉按钮边框只需要在wxss样式代码中添加:

 

  1. .btn::after {
  2. border: 0;
  3. }
 

按钮点击时的背景颜色

wxml代码

 

  1. <button class='btn' bindtap='sumbit' hover-class='btn_hover'>确定</button>
  2. wxss代码
  3.  
  4. .btn_hover {
  5. background-color: pink;
  6. }

这里,hover-class是重点,小程序文档中这样解释这个属性:

类型:String  默认值:button-hover  说明:指定按钮按下去的样式类。当hover-class='none'时,没有点击效果。


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23713.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询