微信小程序修改radio的样式,以及获取radio选择的值(自定义radio样式)

 博主介绍:本人专注于Android/java/数据库/微信小程序技术领域的开发,以及有好几年的计算机毕业设计方面的实战开发经验和技术积累;尤其是在安卓(Android)的app的开发和微信小程序的开发,很是熟悉和了解;本人也是多年的Android开发人员;希望我发布的此篇文件可以帮助到您;

🍅希望此文章可以帮助到您🍅

目录

微信小程序文章推荐

效果显示

1:默认样式

2:自定义样式

一、前端界面

二、js逻辑处理

三、留个脚印吧


微信小程序文章推荐

微信小程序布局图片上面显示文字

微信小程序实现左边图片右边文字效果

微信小程序获取当前日期和时间

  微信小程序绘制地图轨迹线路

微信小程序绘制marker

微信小程序之绘制多个marker以及调用手机地图软件导航

效果显示

1:默认样式

2:自定义样式

一、前端界面

<view class="zoomtop">

            <view style="font-weight: bold;;margin-left: 15rpx;font-size: 32rpx;">

              车牌颜色:

            </view>

            <view class="inputInfor">

              <view class="page-section">

                <radio-group bindchange="radioChange" class="form-radio_wrap" style="font-size: 30rpx;">

                  <label class="radio" style="margin-left: 10rpx;">

                    <radio value="1" checked="true" />蓝牌

                  </label>

                  <label class="radio" style="margin-left: 25rpx;">

                    <radio value="2" />黄牌

                  </label>

                </radio-group>

              </view>

            </view>

          </view>

二、css样式

radio .wx-radio-input {

  width: 35rpx;

  height: 35rpx;

  border-radius: 50%;

  border: 2rpx solid #000;

  background: transparent;

}


 

radio .wx-radio-input.wx-radio-input-checked {

  width: 35rpx;

  height: 35rpx;

  border: 2rpx solid #000;

  background-color: white !important;/*外圈边框与内圈实心圆间的内容的颜色,不设置就默认是上面的绿色*/

}

  

radio .wx-radio-input.wx-radio-input-checked::before {

  width: 35rpx;

  height: 35rpx;

  border-radius: 50%;

  /* 圆角 */

  width: 20rpx;

  /* 选中后对勾大小,不要超过背景的尺寸 */

  height: 20rpx;

  /* 选中后对勾大小,不要超过背景的尺寸 */

  line-height: 20rpx;

  text-align: center;

  font-size: 0rpx;

  /* 对勾大小 30rpx */

  color: transparent;

  /* 对勾颜色 白色 */

  background: #000;

  transform: translate(-50%, -50%) scale(1);

}

                     

三、获取选择的值

  radioChange(e) {

        console.log('radio发生change事件,携带value值为:', e.detail.value)

        this.setData({

            choiceIsYH:e.detail.value

        })

    },

四、留个脚印吧

大家要是感觉此篇文章有意义;那就给个关注、点赞,收藏吧;

🍅也可以关注文档末尾公众号🍅

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/669894.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

谷歌推广和seo留痕具体怎么操作?

留痕跟谷歌推广其实是一回事&#xff0c;你能在谷歌上留痕&#xff0c;其实就是推广了自己的信息&#xff0c;本质上留痕就是在各大网站留下自己的记录&#xff0c;这个记录可以是品牌信息&#xff0c;联系方式&#xff0c;看你想留下什么 如果要问自己怎么操作&#xff0c;正常…

C++基础理论学习

一、常量及符号 常量就是在程序运行过程中不可以改变的数值。例如&#xff0c;每个人的身份证号码就是一常量&#xff0c;是不能被更改的。常量可分为整型常量、浮点型常量、字符常量和字符串常量。 上面的代码通过com输出4行内容&#xff0c;cot是输出流&#xff0c;实现输出…

事务的使用 @Transactional

更新操作多个数据表的时候需要使用到事务 事务&#xff1a;要么都执行&#xff0c;要么都不执行。 1.Transactional 如果有异常&#xff0c;只有RunTimeException和Error时&#xff0c;事务才会生效&#xff0c;否则事务不会生效&#xff0c;需要手动开启事务currentTransacti…

FTP和NFS

一、FTP 1.FTP原理 FTP&#xff08;file Transfer Protocol&#xff0c;文件传输协议&#xff09;&#xff0c;是典型的C/S架构的应用层协议&#xff0c;由客户端软件和服务端软件两个部分共同实现文件传输功能&#xff0c;FTP客户端和服务器之间的连接时可靠的&#xff0c;面…

【微服务】服务保护(通过Sentinel解决雪崩问题)

Sentinel解决雪崩问题 雪崩问题服务保护方案服务降级保护 服务保护技术SentinelFallback服务熔断 雪崩问题 在微服务调用链中如果有一个服务的问题导致整条链上的服务都不可用&#xff0c;称为雪崩 原因 微服务之间的相互调用&#xff0c;服务提供者出现故障服务的消费者没有…

【双曲几何-05 庞加莱模型】庞加来上半平面模型的几何属性

文章目录 一、说明二、双曲几何的上半平面模型三、距离问题四、弧长微分五、面积问题 一、说明 庞加莱圆盘模型是表示双曲几何的一种方法&#xff0c;对于大多数用途来说它都非常适合几何作图。然而&#xff0c;另一种模型&#xff0c;称为上半平面模型&#xff0c;使一些计算变…

全栈低代码:前后端业务需求实现100%覆盖!

工具背景&#xff1a; 织信低代码平台“组件设计器”功能专为对个性化定制页面需求较为强烈的用户准备的&#xff0c;该功能组件十分丰富和强大&#xff0c;还融合了AI智能&#xff0c;能够帮助用户0成本起步&#xff0c;平均花1-2个小时就能快速构建一套网站、APP、小程序。 …

一码当先!Xinstall二维码推广,让App安装无忧

在移动互联网时代&#xff0c;App的推广方式层出不穷&#xff0c;但二维码推广始终占据着重要的地位。作为国内专业的App全渠道统计服务商&#xff0c;Xinstall深知二维码推广的潜力与价值&#xff0c;并致力于通过创新的技术和服务&#xff0c;帮助广告主和开发者实现推广效果…

UE5 audio capture 回声问题 ||在安卓上有爆鸣声

参考视频 0.基本步骤 【UE4_蓝图】录制麦克风声音/系统声音并输出保存WAV文件_ue4录音-CSDN博客 1.步骤 1.创建Sound Submix A 2. 右键新建Sound Submix B 3.把B的两个参数调为-96 4.audio capture的Base Submix&#xff0c;把前面提到的A赋值进去 5.开始录制输出和完成录制…

二分+计数,CF1569D Inconvenient Pairs

目录 一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 二、解题报告 1、思路分析 2、复杂度 3、代码详解 一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 Problem - 1569D - Codeforces 二、解题报告 1、思路分析 我们考虑路径距…

什么是高级持续威胁(APT)

高级持续性威胁&#xff08;Advanced Persistent Threat&#xff0c;APT&#xff09;&#xff0c;又叫高级长期威胁&#xff0c;是一种复杂的、持续的网络攻击&#xff0c;包含三个要素&#xff1a;高级、长期、威胁。 【高级】是指执行APT攻击需要比传统攻击更高的定制程度和…

Remix框架实现 SSR

SSR SSR是一种网页渲染方式&#xff0c;它与传统的客户端渲染&#xff08;CSR&#xff09;相对&#xff0c;在日常的项目中我们更多是使用 CSR 的方式进行前端分离开发&#xff0c;渲染会在浏览器端进行。然而在SSR中&#xff0c;当用户请求一个网页时&#xff0c;服务器将生成…