uniapp自定义radio的样式，适用于微信小程序-Toy模板网

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

uniapp内置组件是有官方定义的样式，下面如图所示。

uniapp radio,uniapp,微信小程序,uni-app,前端

但是注意一点：

radio的默认颜色，在不同平台不一样。微信小程序是绿色的，抖音小程序为红色，其他平台是蓝色的。更改颜色使用color属性。

项目中需求的样式是不同于内置radio的在这里打算自己写一个单选按钮，实现如下：

uniapp radio,uniapp,微信小程序,uni-app,前端

<template>
	<view class="Details">
		<view class="label-input">
						是否开启
					</view>
					<view class="radio-sty">

						<text class="yes" :class="show===0?'show':''" @click="yes(0)">
							<text class="yes-son" v-if='showIndex===0'>
							</text>
						</text>是
						<text class="no" :class="show===1?'show':''" @click="yes(1)" style="margin-left: 280rpx;">
							<text class="no-son" v-if='showIndex===1'>
							</text>
						</text>否
					</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showIndex: '',
				show: '',
                isshowdata: {
					show: '',
					index: 1,
					qynum: 0,

				}
			}
		},

		methods: {
			yes(val) {
				this.showIndex = val
				this.show = val
                this.isshowdata.show = val
			},

		},
	}
</script>

<style lang="scss" scoped>
		.show {
			border: 2rpx solid #0052D9 !important;
		}
        .Details{
            .label-input {
				color: #333333;
				font-size: 28rpx;
				line-height: 60rpx;
			}

            ::v-deep.radio-sty {
		        line-height: 32rpx;
		.yes,
		.no {
			position: relative;
			content: "";
			width: 32rpx;
			height: 32rpx;
			top: 10rpx;
			margin-right: 10rpx;
			border-radius: 50%;
			background-color: #fff;
			border: 2rpx solid #E2E2E2;
			z-index: 5;

			.yes-son {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				content: "";
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				background-color: #0052D9;
				border: 2rpx solid #0052D9;
				z-index: 6;
			}

			.no-son {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				content: "";
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				background-color: #0052D9;
				border: 2rpx solid #0052D9;

				z-index: 6;
			}
		}
	}					
}
</style>

亲测有效

感谢支持，希望对您有帮助！文章来源地址https://www.toymoban.com/news/detail-847380.html

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