当前位置:   article > 正文

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

小程序 radiogroup 圆圈大小

小程序自带的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}}"
  • 1
  • 2
  • 3
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/盐析白兔/article/detail/791864
推荐阅读
相关标签
  

闽ICP备14008679号