微信小程序如何实现radio单选框单击打勾和取消
更新时间:2020年01月21日 14:40:55 作者:致爱丽丝
这篇文章主要介绍了微信小程序如何实现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) },
这样 就完成了单击打勾再击取消。
以上。
相关文章
JavaScript中你不知道的Object.entries用法
大家应该都知道,Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for...in 循环遍历该对象时返回的顺序一致,这篇文章主要给大家介绍了关于JavaScript中你不知道的Object.entries用法的相关资料,需要的朋友可以参考下2021-10-10Ant Design Blazor 组件库的路由复用多标签页功能
在 Ant Design Blazor 组件库中实现多标签页组件的呼声日益高涨。于是,我利用周末时间,结合 Blazor 内置路由组件实现了基于 Tabs 组件的 ReuseTabs 组件,需要的朋友跟随小编一起看看吧2021-07-07
最新评论