网络编程
位置：首页>> 网络编程>> JavaScript>> 微信小程序如何实现radio单选框单击打勾和取消

微信小程序如何实现radio单选框单击打勾和取消

作者：致爱丽丝　　发布时间：2024-06-17 20:41:19　

标签：微信,小程序,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)
},

这样 就完成了单击打勾再击取消。

以上。

来源：https://www.cnblogs.com/hjk1124/p/12193257.html

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com