今天南京小程序开发主要来说说是怎么样去实现无线电广播电台的检查,下面就跟着我们的文章一起来看看如何做的,前端使用输入来编写单选,并且如果小程序使用单选标签,则小程序也可以使用<radio />单个标签
1.自定义电台样式
默认情况下Wx真的很丑
/*Radio box style*/
/*Initial style*/
radio .wx-radio-input{
width: 32rpx;
height: 32rpx;
border-radius: 0
}
/*Selected background style (background border)*/
radio .wx-radio-input.wx-radio-input-checked{
Width: 32rpx; / * check the size of the checkmark, not to exceed the size of the background*/
Height: 32rpx; / * check the size of the checkmark, not to exceed the size of the background*/
background:white!important;
}
/*Checkmark style after selection*/
radio .wx-radio-input.wx-radio-input-checked::before{
Width: 32rpx; / * check the size of the checkmark, not to exceed the size of the background*/
Height: 32rpx; / * check the size of the checkmark, not to exceed the size of the background*/
line-height: 32rpx;
text-align: center;
Font size: 36rpx; / * tick size*/
Color: black; / * checkmark color*/
background: white;
transform:translate(-50%, -50%) scale(1);
-webkit-transform:translate(-50%, -50%) scale(1);
}
2.单选后再取消取消效果
wxml:
< radio checked = '{{check}}' bindtap '=' / radio > < label for = "radios" > anonymous < / label >
wx.js
//This code is written in data
check:false
radiocon:function(e){
this.setData({
check: !this.data.check
})
Console.log ("this. Data. Check" is checked by the user)
},
这样就完成了单击刻度,然后单击“取消”。
以上就是今天
南京小程序开发安优云带来的全部内容,希望在你们开发小程序的时候提供一些帮助。