微信小程序radio checked选中问题

在开发小程序的过程中遇到了radio选中之后,又变成未选中状态的问题,

 <view class="cell_view_layout">

                                <radio style="margin: 0;height: 60rpx;width:100rpx;transform: scale(0.7)" :value="index" :checked="index === courseIndex" />
                            </view>
  radioChange:function (evt) {
                console.log(evt)
                this.courseIndex = parseInt(evt.target.value);
               
            },

经过仔细研究,发现是通过元素的value传递过来的值是字符串,如果直接跟index(数字)比较会出现这个问题。找到原因之后,我们把方法改一下,把从元素中获取到的value转换成Int就可以了,如上图中的:

parseInt(evt.target.value)方法。

JS字符串转数字可以参考我的另一篇博客

JS字符串转数字

<think>好的,用户想了解如何自定义微信小程序radio组件的样式。首先,我需要回忆一下微信小程序的文档和相关资料。记得radio组件通常和radio-group一起使用,样式修改可能涉及到WXSS文件。 根据引用[1],用户可以通过radio-group的bindchange事件来获取选中的值,同需要调整类名如.form-radio_wrap来修改样式。而引用[2]提到可以使用transform:scale来直接调整radio的大小,这可能是一个简便的方法。另外,引用[3]详细说明了radio的核心属性,比如color和checked状态,这些属性可能在自定义样式很重要。 接下来,我需要整理步骤。首先,修改radio的大小和颜色可能需要使用内置属性,比如color和checked-color。然后,如果这些属性不够,可能需要通过自定义类来覆盖默认样式,比如修改.wx-radio-input。或者,如引用[2]提到的,直接使用style属性进行缩放。此外,隐藏原生的radio组件并使用自定义视图也是一种方法,这样可以更灵活地设计样式。 可能遇到的问题包括:样式不生效,可能是因为选择器权重不够,或者需要启用复选框样式。需要提醒用户检查这些点。另外,事件绑定是否正确,比如确保radio-group有bindchange事件处理函数。 最后,生成相关问题要覆盖常见的使用场景,比如修改颜色、隐藏原组件、获取选中的值等。确保回答结构清晰,步骤明确,用户能一步步跟着操作。</think>### 微信小程序自定义 Radio 组件样式的分步指南 #### 1. **使用内置属性调整基础样式** - **核心属性**:通过 `color`(未选中颜色)和 `checked-color`(选中颜色)快速修改单选按钮的默认颜色。 ```html <radio color="#999" checked-color="#007AFF" /> ``` 此方法无需编写复杂样式,适合简单颜色调整[^3]。 #### 2. **通过类选择器深度定制样式** - **覆盖原生样式规则**: ```css /* 修改单选按钮容器 */ .custom-radio .wx-radio-input { width: 40rpx; height: 40rpx; border-radius: 50%; border: 2rpx solid #ccc; } /* 选中状态图标 */ .custom-radio .wx-radio-input.wx-radio-input-checked::before { content: ''; width: 24rpx; height: 24rpx; background: #007AFF; border-radius: 50%; transform: translate(-50%,-50%); } ``` 注意:需在组件设置中启用复选框样式增强: ```json { "component": true, "usingComponents": {}, "styleIsolation": "apply-shared" } ``` #### 3. **缩放原始组件尺寸** - **直接样式覆盖**(适用于简单缩放): ```html <radio style="transform: scale(0.8); margin-right: 10rpx" /> ``` 此方法通过CSS变形实现尺寸调整,但可能影响布局对齐[^2]。 #### 4. **完全自定义样式方案** - **隐藏原生组件+视觉层替换**: ```html <radio-group bindchange="onRadioChange"> <label wx:for="{{list}}" wx:key="id"> <radio value="{{item.value}}" hidden /> <view class="custom-radio {{checked === item.value ? 'active' : ''}}"> {{item.label}} </view> </label> </radio-group> ``` ```css .custom-radio { padding: 20rpx; border: 1rpx solid #eee; border-radius: 8rpx; } .custom-radio.active { border-color: #007AFF; background: rgba(0,122,255,0.1); } ``` #### 5. **事件绑定与数据获取** - 在对应Page中定义事件处理: ```javascript Page({ data: { checked: '' }, onRadioChange(e) { this.setData({ checked: e.detail.value }) } }) ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值