輕松建站 服務(wù)到位為客戶提供一體化網(wǎng)站設(shè)計(jì)服務(wù)
小程序開發(fā)全功能小程序商城、開發(fā)定制服務(wù)、全程售后服務(wù)、無憂備案
分享、交流、傳播知識分享、技術(shù)交流、經(jīng)驗(yàn)積累、提升能力
微信小程序開發(fā)時對于radio組件的樣式經(jīng)驗(yàn)，直奔主題:
radio組件樣式
微信小程序radio組件改顏色的實(shí)現(xiàn)，微信自帶的樣式是綠色的，如下圖：
改顏色是不能直接用外部wxss去指定的,如下代碼是不能實(shí)現(xiàn)的
wxml:
<radio value="0" class="radiocolor" />
wxss:
.radiocolor{
color:#d81e06
}
如以上代碼是沒有效果的，這個按CSS設(shè)計(jì)原理應(yīng)該是可以的，不知以后微信是否會修改，我們要改顏色只能寫在wxml里，如下代碼：
<radio value="0" color="#d81e06" />
當(dāng)然有些也喜歡改成這樣的效果，圈子里是點(diǎn)而不是勾：
且看實(shí)現(xiàn)代碼，wxml無需改動
wxml代碼:
<radio value="r1" checked="true"/>選中
wxss代碼：
/* 單選按鈕樣式*/
radio .wx-radio-input {
width: 40rpx;
height: 40rpx;
border: 4rpx solid #8C8C8C;/* 外圈邊框，默認(rèn)灰色，即未選中狀態(tài)*/
border-radius: 50%;
background: none;
}
/*單選按鈕選中后內(nèi)部樣式*/
radio .wx-radio-input.wx-radio-input-checked {
border: 4rpx solid #00A0E9 !important;/* 外圈邊框，選中狀態(tài)顏色*/
background-color: white !important;/* 外圈邊框與內(nèi)圈實(shí)心圓間的內(nèi)容的顏色，不設(shè)置就默認(rèn)是上面的綠色*/
}
/*單選按鈕選中后內(nèi)部中心*/
radio .wx-radio-input.wx-radio-input-checked::before {
width: 60%;
height: 60%;
background: #00A0E9;/* 內(nèi)圈實(shí)心圓選中狀態(tài)顏色*/
border-radius: 50%;
content: '';/* 隱藏??*/
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
}
通過以上兩個實(shí)例代碼，舉一反三，對于微信小程序的radio組件樣式基本可通用。
