微信小程序radio单选按钮选中与取消

 

 

 wxml

<view bindtap='checkedTap'>
      <radio checked="{{checked}}">设为默认</radio>
</view>

wxss

<style lang="less" >
radio .wx-radio-input {
  border-radius: 50%; /* 圆角 */
  width: 24rpx;
  border: 2rpx solid #5e5e5f;
  height: 24rpx;
}
radio .wx-radio-input.wx-radio-input-checked {
  border: none;
  background: #c1885a;
}
radio .wx-radio-input.wx-radio-input-checked::before {
  border-radius: 50%; /* 圆角 */
  width: 28rpx; /* 选中后对勾大小,不要超过背景的尺寸 */
  height: 28rpx; /* 选中后对勾大小,不要超过背景的尺寸 */
  line-height: 28rpx;
  text-align: center;
  font-size: 20rpx; /* 对勾大小 30rpx */
  color: #fff; /* 对勾颜色 白色 */
  background: #c1885a;
  transform: translate(-50%, -50%) scale(1);
}
</style>

在点击事件中,通过取反即可实现选中与取消。 

js 

 data: {
    checked:true
  },
  //是否选中
  checkedTap: function () {
    this.setData({
      "checked": !this.data.checked
    })
  },

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

centos7安装tomcat

安装tomcat 必须依赖 JDK 环境&#xff0c;一定要提前装好JDK保证可以使用 一、下载安装包 到官网下载 上传到linux 服务器 二、安装tomcat 创建tomcat 文件夹 mkdir -p /usr/local/tomcat设置文件夹权限 chmod 757 tomcat将安装包上传至 新建文件夹 解压安装包 tar zx…

解读 Zebec Protocol 发布的最新路线图,向 Web2 世界跨越的野望

近期&#xff0c;流支付协议 Zebec Protocol 发布了最新的路线图&#xff0c;揭示了生态在未来一年的全新发展规划。目前&#xff0c; Zebec Protocol 生态打造了一套全新的产品矩阵&#xff0c;包括模块化 Layer3 链 Nautilus Chain 、流支付应用 Zebec APP 以及薪酬管理协议 …

深入了解数据库的索引分类以及回表查询原理

索引的分类 在InnoDB存储引擎中的又可以分为以下两种 聚集索引的选取规则 如果有主键&#xff0c;主键索引就是聚集索引。 如果不存在主键&#xff0c;将会使用第一个唯一&#xff08;UNIQUE&#xff09;索引作为聚集索引 如果表没有主键&#xff0c;或者没有合适的唯一索引…

idea 关于高亮显示与选中字符串相同的内容

dea 关于高亮显示与选中字符串相同的内容&#xff0c;本文作为个人备忘的同时也希望可以作为大家的参考。 依次修改File-settings-Editor-Color Scheme-General菜单下的Code-Identifier under caret和Identifier under caret(write)的Backgroud色值&#xff0c;可以参考下图。…

记录vue的一些踩坑日记

记录vue的一些踩坑日记 安装Jq npm install jquery --save vue列表跳转到详情页&#xff0c;再返回列表的时候不刷新页面并且保持原位置不变&#xff1b; 解决&#xff1a;使用keepAlive 在需要被缓存的页面的路由中添加&#xff1a;keepAlive: true, {path: /viewExamine,nam…

自然语言处理14-基于文本向量和欧氏距离相似度的文本匹配,用于找到与查询语句最相似的文本

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下自然语言处理14-基于文本向量和欧氏距离相似度的文本匹配&#xff0c;用于找到与查询语句最相似的文本。NLP中的文本匹配是指通过计算文本之间的相似度来找到与查询语句最相似的文本。其中一种常用的方法是基于文本…

贼全! 一举通关的 Spring+SpringBoot+SpringCloud 全攻略, 是真香啊

前几天&#xff0c;有幸从朋友那里得到了一份 Alibaba 内部的墙裂推荐的“玩转 Spring 全家桶的 PDF”&#xff0c;我也不是个吝啬的人&#xff0c;好的东西当然要一起分享。那今天我就秀一把&#xff0c;带你一站通关 Spring、Spring Boot 与 Spring Cloud,让你轻松斩获大厂 O…

【C++】多态、黑马程序员案例— —电脑组装、Visual Studio开发人员工具查看内部结构,cl /d1 reportSingleClassLayout

author&#xff1a;&Carlton tag&#xff1a;C topic&#xff1a;【C】多态、黑马程序员案例— —电脑组装、Visual Studio开发人员工具查看内部结构,cl /d1 reportSingleClassLayout website&#xff1a;黑马程序员C date&#xff1a;2023年7月24日 目录 纯虚函数、抽…

【Spring】什么是Bean的生命周期及作用域,什么是Spring的执行流程?

博主简介&#xff1a;想进大厂的打工人博主主页&#xff1a;xyk:所属专栏: JavaEE进阶 在前面的播客中讲解了如何从Spring中存取Bean对象&#xff0c;那么本篇我们来讲解Bean对象的生命周期是什么&#xff0c;Bean对象的6种作用域分别是什么&#xff0c;都有哪些区别&#xff…

7年经验之谈 —— 浅谈web性能测试

什么是性能测试&#xff1f; web性能应该注意些什么&#xff1f; 性能测试&#xff0c;简而言之就是模仿用户对一个系统进行大批量的操作&#xff0c;得出系统各项性能指标和性能瓶颈&#xff0c;并从中发现存在的问题&#xff0c;通过多方协助调优的过程。而web端的性能测试…

高效协作处理缓存清理需求:生产者-消费者模式助力多模块缓存管理

在现代应用系统中&#xff0c;缓存是提高性能和减少数据库负载的重要手段之一。然而&#xff0c;缓存的数据在某些情况下可能会过期或者变得无效&#xff0c;因此需要及时进行清理。在复杂的应用系统中&#xff0c;可能有多个系统、多个模块产生缓存清理需求&#xff0c;而这些…

【LeetCode】剑指 Offer Ⅱ 第1章:整数(5道题) -- Java Version

题库链接&#xff1a;https://leetcode.cn/problem-list/e8X3pBZi/ 题目解决方案剑指 Offer II 001. 整数除法快速除 ⭐剑指 Offer II 002. 二进制加法模拟&#xff1a;StringBuilder ⭐剑指 Offer II 003. 前 n 个数字二进制中 1 的个数动规&#xff1a;res[i] res[i & (…

【组内工作】木马回联

文章目录 C2服务器安装和运行方法CrossC2运行方法sliver运行方法empire安装方法DeimosC2安装教程TrevorC2安装教程&#xff1a; C2服务器的流量特征CrossC21. 心跳包2. 命令3. ja3/ja3s Sliver1. http2. https empirehttphttps DeimosC2https TrevorC2 C2服务器安装和运行方法 …

C\C++内存管理

目录 1.C/C内存分布2.C语言中动态内存管理方式3.C中动态内存管理3.1new/delete内置类型3.2new和delete操作自定义类型 4.operator new与operator delete函数4.2重载operator new与operator delete&#xff08;了解&#xff09; 5.new和delete的实现原理5.1内置类型5.2 自定义类…

2023亚马逊云科技中国峰会——Amazon DeepRacer

1.DeepRacer技术背景 早在20世纪初汽车问世之时&#xff0c;发明家们便已提出无人驾驶的设想。但即便是实现无人驾驶的初级阶段&#xff0c;也经历了足足百年时间。毕竟在复杂的城市路况下&#xff0c;机器若想像人一样实现感知、决策、控制等功能&#xff0c;必定面临各种复杂…

每日一博 - How To Improve API Performance

文章目录 包括但局限于以下措施1. 采用分页显示2. 异步记录日志3. 利用缓存技术4. 实施负载压缩5. 管理数据库连接池 包括但局限于以下措施 1. 采用分页显示 当查询结果过多时&#xff0c;将结果分为多个页面进行显示&#xff0c;可以有效地提高系统的响应速度。这样&#xff…

IntelliJ IDEA 2023.2 主要更新了什么?(纯文本介绍版)

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

empty module导致的lvs问题

write_verilog时-exclude empty_modules即可 这里也分享一下ICC2 write lvs netlist的命令 write_verilog -exclude {scalar_wire_declarations leaf_module_declarations empty_modules well_tap_cells filler_cells supply_statements} -hierarchy all -force_no_referenc…

Spring MVC 是什么?

一、什么是 Spring MVC&#xff1f; 官方对于 Spring MVC 的描述是这样的&#xff1a; Spring Web MVC is the original web framework built on the Servlet API and has been included in the Spring Framework from the very beginning. The formal name, “Spring Web …

信息安全战线左移!智能网联汽车安全亟需“治未病”

当汽车由典型的工业机械产品逐步发展成为全新的智能移动终端&#xff0c;汽车的安全边界发生了根本性改变&#xff0c;信息安全风险和挑战不断增加。 面对复杂的异构网络、异构系统及车规级特异性要求&#xff0c;智能智能网联汽车信息安全到底要如何防护&#xff0c;已经成为…