小程序模板網(wǎng)

微信小程序button組件自定義樣式

發(fā)布時間:2018-04-19 09:38 所屬欄目:小程序開發(fā)教程

背景顏色

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組件默認(rèn)帶有邊框,去掉按鈕邊框只需要在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  默認(rèn)值:button-hover  說明:指定按鈕按下去的樣式類。當(dāng)hover-class='none'時,沒有點擊效果。


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/23713.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢