uniapp自定义radio的样式，适用于微信小程序

最新推荐文章于 2024-06-13 14:49:15 发布

小杜同学ya

最新推荐文章于 2024-06-13 14:49:15 发布

阅读量1.4k

点赞数 9

分类专栏： uniapp 微信小程序文章标签： uni-app 前端

本文链接：https://blog.csdn.net/qq_58662962/article/details/135549400

版权

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

但是注意一点：

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

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

<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=&

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小杜同学ya

关注关注

9
点赞
踩
16

收藏

觉得还不错? 一键收藏
1
评论
uniapp自定义radio的样式，适用于微信小程序

uniapp自定义radio的样式，适用于微信小程序环境
复制链接

扫一扫

专栏目录

微信小程序如何实现radio单选框单击打勾和取消

11-21

前端使用input 来写radio,小程序使用radio标签也可以使用单标签 1.自定义radio样式、 wx默认的是真的丑 /* 单选框样式 */ /* 初始样式 */ radio .wx-radio-input{ width: 32rpx; height: 32rpx; border-radius: 0 } /* 选中后的背景样式（背景边框） */ radio .wx-radio-input.wx-radio-input-checked{ width: 32rpx; /* 选中后对勾大小，不要超过背景的尺寸 */ height: 32rpx

uniapp自定义“radio”，“checkbox” 样式

weixin_44936767的博客

04-13

288

【代码】uniapp自定义“radio”，“checkbox” 样式。

1 条评论您还未登录，请先登录后发表或查看评论

【菜鸡记录】微信小程序调整原生radio样式

热门推荐

Oliver尹的博客

08-31

1万+

本文主要分享了uni-app中内置组件checkbox的一些用法，主要包括属性如value属性，禁用属性，选中属性等，以及checkbox提供的默认事件change的使用，最后示例了一个结合v-for指令，button组件完成了一个动态生成checkbox并获取选中值的示例demo；.........

uniapp中的单选实例（ radio）

babyxuqian的博客

11-04

9336

radio-groupsd 单项选择器，内部由多个<radio>组成。通过把多个radio包裹在一个radio-group下，实现这些radio的单选。属性说明属性名类型默认值说明 @change EventHandle <radio-group>中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value} radio 单选项目。属性说明属......

uniapp中组件库的Radio 单选框丰富的使用方法

精通前端技术，了解后端接口

01-03

5172

可以通过设置shape为square或者circle，将单选框设置为方形或者圆形此处所指的颜色，为radio选中时的背景颜色，参数为

uniapp中实现radio实心圆单选

chen_ac的博客

11-01

3934

在uniapp中，radio的单选样式的打勾样式，并且input组件不能使用type="radio"类型，这样并不能满足日常的radio需求需要实现实心圆的radio单选，只能根据原生样式进行设计，下面使用vue.js举例 <view> <view><radio>1</radio></view> <view class="radio-content"> <view class="radio-cont..

详解微信小程序Radio选中样式切换

12-29

详解微信小程序Radio选中样式切换本篇文章主要讲解在微信小程序中如何根据Radio选中来切换样式。效果如下：原理主要是通过判断一个radio-group中哪个被选中，就让它加上一个“active”的样式。代码如下： &lt...

微信小程序实现自定义picker选择器弹窗内容

08-27

微信小程序实现自定义Picker选择器弹窗内容 微信小程序实现自定义Picker选择器弹窗内容是指在微信小程序中实现自定义的Picker选择器弹窗内容，满足开发者对选择器弹窗内容的个性化需求。本文将详细介绍微信小程序...

微信小程序单选radio及多选checkbox按钮用法示例

11-28

总结，微信小程序提供了 `radio` 和 `checkbox` 这两种表单组件，便于开发者构建交互式用户界面。理解它们的工作原理、事件处理以及数据绑定机制，可以帮助我们创建功能完备且用户友好的小程序应用。希望以上内容能...

uniapp的radio大小设置，解决办法，以及radio的背景等样式修改。

柑橘乌云_

06-14

1860

通过color-ui的css发现他们修改radio原生组件的选择器中有wx开头的类名，编译器中检查元素发现并没有看到，怀疑是隐藏了。官网文档有写建议大小设置采取用transform: scale(0.7);

uniapp修改radio的样式

i_kun的博客

03-22

1万+

uniapp原生的radio是有样式的，勾勾样式 radio的默认颜色，在不同平台不一样。微信小程序是绿色的，字节跳动小程序为红色，其他平台是蓝色的。更改颜色使用color属性。用官网的实例来，源码如下： <radio-group @change="radioChange"> <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value"&gt...

前端vue uni-app基于radio增强单选框组件

chenchuang0128的博客

06-10

2494

完成

uniapp中实现移除radio选中状态

以码会友

01-25

1038

但在实际使用中发现，即使将selected=null，依然无法在页面上取消选中状态，官方也并没有提供相关的钩子。这里需要用到一个setTimeout，timeout时间可以尽量短，避免页面出现闪一下的效果。那么，如何实现一键清除已选中的radio状态呢？可以设置。这种来控制是否选中该项，

uni-app——uniapp 修改 radio 大小

qq_43201350的博客

01-23

698

uni-app——uniapp 修改 radio 大小

uniapp自定义radio激活样式

09-04

要自定义uniapp中radio的激活样式，可以通过修改radio的样式来实现。具体步骤如下： 1. 在页面的样式文件中添加radio的样式定义，例如： ```css .custom-radio { position: relative; display: inline-block; width: 20px; height: 20px; border: 2px solid #999; border-radius: 50%; margin-right: 10px; } .custom-radio input[type="radio"] { position: absolute; opacity: 0; cursor: pointer; } .custom-radio input[type="radio"]:checked::before { content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background: #000; } ``` 2. 在radio组件的标签中添加class属性，指定自定义的样式名称，例如： ```html <radio class="custom-radio" name="radio" value="1">选项1</radio> ``` 这样就可以自定义radio的激活样式了。请注意，以上样式只是示例，实际应用中可以根据需要进行修改。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交