微信小程序如何实现radio单选框单击打勾和取消
版权申诉
62 浏览量
2020-11-21
22:18:28
上传
评论 1
收藏 26KB PDF 举报
微信小程序如何实现微信小程序如何实现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
最新资源
- 前端开发-什么是前端开发-关于前端开发的一些相关介绍
- Sora AI-关于文生视频的使用场景说明
- suno AI文生视频的相关教程和介绍使用
- 什么是后端开发-关于后端开发的一些小介绍分享
- Jurassic Pack Vol. II Dinosaurs 侏罗纪包卷恐龙二号Unity游戏模型资源unitypackage
- Jurassic Pack Vol. III Dinosaurs 侏罗纪包卷恐龙三号Unity游戏模型资源unitypackag
- Ultimate Seating Controller 终极座椅控制器Unity游戏开发插件资源unitypackage
- 什么是人工智能-关于人工智能的相关介绍说明
- Figma Converter for Unity适用Unity的Figma转换器Unity游戏开发插件unitypackage
- Creepy Animatronic Anims 令人毛骨悚然的电子动画Unity游戏动画插件资源unitypackage
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0