没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
试读
1页
前端使用input 来写radio,小程序使用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
资源详情
资源评论
资源推荐
微信小程序如何实现微信小程序如何实现radio单选框单击打勾和取消单选框单击打勾和取消
前端使用input 来写radio,小程序使用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; /* 选中后对勾大小,不要超过背景的尺寸 */
background:white!important;
}
/* 选中后的 对勾样式 */
radio .wx-radio-input.wx-radio-input-checked::before{
width: 32rpx; /* 选中后对勾大小,不要超过背景的尺寸 */
height: 32rpx; /* 选中后对勾大小,不要超过背景的尺寸 */
line-height: 32rpx;
text-align: center;
font-size:36rpx; /* 对勾大小 */
color:black; /* 对勾颜色 */
background: white;
transform:translate(-50%, -50%) scale(1);
-webkit-transform:translate(-50%, -50%) scale(1);
}
2.单选打勾再选打勾取消效果
wxml:
<radio checked='{{check}}' id="radios" bindtap='radiocon'></radio><label for="radios">匿名</label>
wx.js
//这条代码在data里写
check:false
radiocon:function(e){
this.setData({
check: !this.data.check
})
console.log("用户打勾的是 ",this.data.check)
},
这样 就完成了单击打勾再击取消。
以上。
weixin_38642735
- 粉丝: 3
- 资源: 951
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- HTML+CSS+JS网页设计:从入门到精通.zip
- 数据库课程设计:从理论到实践的全面指南.zip
- Python闭包:深入理解与应用场景解析.zip
- Win64OpenSSL-3-3-0.exe
- 课高分程设计-基于C++实现的民航飞行与地图简易管理系统-南京航空航天大学
- 航天器遥测数据故障检测系统python源码+文档说明+数据库(课程设计)
- 北京航空航天大学操作系统课设+ppt+实验报告
- 基于Vue+Echarts实现风力发电机中传感器的数据展示监控可视化系统+源代码+文档说明(高分课程设计)
- 基于单片机的风力发电机转速控制源码
- 基于C++实现的风力发电气动平衡监测系统+源代码+测量数据(高分课程设计)
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0