uniapp做微信小程序，自定义checkbox和radio的样式-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp做微信小程序，自定义checkbox和radio的样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

用uniapp做个微信小程序，其中有用到自定义checkbox和radio的样式；代码记录如下：

自定义checkbox

在App.vue中写入样式：

    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样式：

如果要全局改变radio的样式，需要将样式代码写在App.vue中，代码如下：

/* radio 未选中时的样式 */
	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 选中后的图标样式*/
	radio.info .wx-radio-input.wx-radio-input-checked::before{
		display: none!important;
	}

代码中引用：

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

如果不在全局改变radio样式，只在单个文件中改变，则在使用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;
	}

效果：

uniapp做微信小程序，自定义checkbox和radio的样式,微信小程序,uni-app,uni-app,微信小程序,小程序

自定义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>个人</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文章来源地址https://www.toymoban.com/news/detail-553437.html

data() {
    return {
		radio1: 1
	}
},
methods: {
    changeRadio1() {
	    this.radio1 = 1;
	    console.log("单位")
    },
    changeRadio2() {
	    this.radio1 = 2;
	    console.log("个人")
    }, 
}

到了这里，关于uniapp做微信小程序，自定义checkbox和radio的样式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！