微信小程序radio不能改变大小?那我自己写一个吧

微信小程序内置的radio组件大小不可调,影响界面效果。本文通过结合text和icon标签,实现可调整大小的自定义radio效果。详细介绍了利用列表遍历、动态设置isSelect属性及响应点击事件的方法,实现单选框的定制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

小程序自带的radio似乎是不能调整大小的,在项目中使用时很不方便,时常会影响整个界面的效果。为了解决这个问题,我使用text标签结合icon标签实现了radio效果。

这里我们实现一个选择地区的单选框

1.使用radio的效果
这里写图片描述
可以清楚的看出来圆圈的大小和字体的大小非常不协调。至于radio如何实现的,这里就不赘述了,大家可以在官方教程中学习简易教程-小程序

2.使用text加 icon实现radio效果

先上效果图
这里写图片描述

这里的icon可以调整大小,调整位置。

接下来看看如何实现的吧。

思路
左边一个< text>右边一个< icon>来实现radio效果。
以列表方式排列所有地区area,给地区设置isSelect属性,如果isSelect=true则显示的icon 的type为success否则icon的type显示circle。
当text被点击时,根据area的id来确定被点击的text,被点击的text对应的area的isSelect属性设置为true否则设置为false。

先附上wxml文件代码部分:

<scroll-view hidden="{
   {
   hideArea}}" <
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值