微信小程序如何实现radio单选框单击打勾和取消
微信(小程序)  /  管理员 发布于 2年前   103
前端使用input 来写radio,小程序使用radio标签 也可以使用 1.自定义radio样式、 wx默认的是真的丑 2.单选打勾再选打勾取消效果 wxml: wx.js 这样 就完成了单击打勾再击取消。 以上。/* 单选框样式 */ /* 初始样式 */ 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);}
//这条代码在data里写 check:falseradiocon:function(e){ this.setData({ check: !this.data.check }) console.log("用户打勾的是 ",this.data.check) },
您可能感兴趣的文章:
博主 在
hyperf框架常用命令-在centos7中退出命令及在docker容器中退出命令中评论 @路过的靓仔:cdn静态资源被墙,已修复..GGGGGGGGG 在
layui框架常用输入框介绍中评论 写的很好解决问题..路过的靓仔 在
hyperf框架常用命令-在centos7中退出命令及在docker容器中退出命令中评论 剩下好多 wait 状态的..激光豆芽 在
为什么你不能安逸?国内996为什么没有国外955香?中评论 国内现在无意义的内卷太多了..激光豆芽 在
阿里云香港服务器搭建自用vpn:Shadowsocks使用流程步骤中评论 厉害了..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号