用uniapp做個(gè)微信小程序，其中有用到自定義checkbox和radio的樣式；代碼記錄如下：

自定義checkbox

在App.vue中寫(xiě)入樣式：

    checkbox.red .wx-checkbox-input,
	checkbox.red .uni-checkbox-input {
	    background-image: url('/static/images/steps/drug_nosel.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		border-color: #00000000;
		width: 16px;
		height: 16px;
	}
	
	checkbox.red[checked] .wx-checkbox-input,
	checkbox.red.checked .uni-checkbox-input{
		background-image: url('/static/images/steps/checkbox_checked.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		color: #00000000;
		border-color: #00000000;
		width: 16px;
		height: 16px;
	}

在代碼中引用：

<checkbox :value="item.id" :checked="item.checked" class="checkbox red" />

自定義radio樣式：

如果要全局改變r(jià)adio的樣式，需要將樣式代碼寫(xiě)在App.vue中，代碼如下：

/* radio 未選中時(shí)的樣式 */
	radio.info .wx-radio-input{
		border-color: #00000072;
		background-repeat: no-repeat;
		width: 16px;
		height: 16px;
		background-clip: content-box!important;
		box-sizing: border-box;
	}
	/* radio 選中后的樣式 */
	radio.info .wx-radio-input.wx-radio-input-checked{
		background-image: url('/static/images/steps/checkbox_checked.png');
		background-color: #00000000!important;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 16px;
		height: 16px;
		border-color: #00000000!important;
		background-clip: content-box!important;
		box-sizing: content-box;
	}
	
	/* radio 選中后的圖標(biāo)樣式*/
	radio.info .wx-radio-input.wx-radio-input-checked::before{
		display: none!important;
	}

代碼中引用：

<radio :value="item" :checked="index === current" class="info" />

如果不在全局改變r(jià)adio樣式，只在單個(gè)文件中改變，則在使用radio的文件中加入如下代碼：

    radio.info .wx-radio-input{
		border-color: #00000072;
		width: 16px;
		height: 16px;
	}
	::v-deep .wx-radio-input.wx-radio-input-checked {
		background-image: url('/static/images/steps/checkbox_checked.png');
		background-color: #00000000!important;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 16px;
		height: 16px;
		border-color: #00000000!important;
		background-clip: content-box!important;
		box-sizing: content-box;
	}
	::v-deep .wx-radio-input.wx-radio-input-checked::before {
		display: none!important;
	}

效果：

自定義radio另外一種方法：

    <view>
		<view><radio>1</radio></view>
		<view class="radio-content">
		  <view class="radio-content" @click="changeRadio1">
		      <view class="radio" :class="radio1 == 1 ? 'radio-default':''">
		        <view :class="radio1 == 1 ? 'radio-active':''"></view>
		      </view>
		      <text>單位</text>
		    </view>
		    <view class="radio-content radio-right" @click="changeRadio2">
		      <view class="radio" :class="radio1 == 2 ? 'radio-default':''">
		        <view :class="radio1 == 2 ? 'radio-active':''"></view>
		      </view>
		      <text>個(gè)人</text>
		    </view>
		  </view>
	</view>

樣式：

.radio-content {
	  height: 40rpx;
	  display: flex;
	  align-items: center;
	}
	.radio {
	  width: 24rpx;
	  height: 24rpx;
	  border-radius: 50%;
	  border: 2rpx solid #CCCCCC;
	  display: flex;
	  flex-direction: column; 
	  align-items: center;
	  justify-content: center;
	  margin: 0rpx 26rpx 0rpx 15rpx;
	}
	.radio-active{
	  width: 16rpx; 
	  height: 16rpx;
	  border-radius: 50%;
	  background-color: #0fbda6;
	}
	.radio-default{
	  border: 2rpx solid #0fbda6;
	}
	.radio-right {
	  margin-left: 66rpx;
	}

method文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-553437.html

data() {
    return {
		radio1: 1
	}
},
methods: {
    changeRadio1() {
	    this.radio1 = 1;
	    console.log("單位")
    },
    changeRadio2() {
	    this.radio1 = 2;
	    console.log("個(gè)人")
    }, 
}

到了這里，關(guān)于uniapp做微信小程序，自定義checkbox和radio的樣式的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！