技術標籤：小程式

拿到UI的圖發現按鈕是 這樣的
但是開發文件上面的是這樣的
然後翻遍開發文件也沒有找到如何從綠綠變成藍藍

好了廢話不說了，綠綠接下來要開始變身了

1.WXML程式碼

			<radio-group name="radio">
				<label>
					<radio value="radio1" />進入提醒</label>
				<label>
					<radio value="radio2" />離開提醒</label>
 

			</radio-group>

現在樣式為
2.新增WXSS樣式

/* 選中後的背景樣式*/
/*按鈕的大小*/
radio .wx-radio-input {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
}
radio .wx-radio-input.wx-radio-input-checked {
   /* 背景顏色 */
  background-color: #fff!important; 
  /* 邊框顏色 */
  border-color: #419dea!important;
}
 
/* 選中後的實心樣式*/
radio .wx-radio-input.wx-radio-input-checked::before
 
 {
 /* 將對號去掉 */
 content: ''; 
 /*實心圓圈的大小*/
 width: 18rpx;
 height: 18rpx;
 /*將圓角設定成50%才是一個圓*/
 border-radius: 50%;
 /*圓圈顏色*/
 background-color: #419dea;
}

現在的效果

好了，變身完成！