C语言学习网

微信小程序怎么修改radio大小

发表于:2022-11-27 作者:安全数据网编辑
编辑最后更新 2022年11月27日,本篇内容介绍了"微信小程序怎么修改radio大小"的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!小程序

本篇内容介绍了"微信小程序怎么修改radio大小"的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

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

思路:
左边一个< 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,设置选择框的父容器位置大小其中radio-group的wxss设定了容器内字体大小已经排练方式

.radio-group{font-size: 26rpx;display: flex;flex-direction: column;}

接下来遍历了areas数组用来显示 地区名称+icon 其中为地区名称 < text>设置了 bindtap、data-areaId 。这里要跟js进行数据交互,其中data-areaId为传递过去的参数。

根据area对象的isSelect属性来确定显示的< icon>,其中一个是圆圈,一个是绿色的对勾。示例中icon的大小设置为10,这里可以随意改变其大小。

接下来是js代码部分。

//选择区域selectAreaOk: function(event){var selectAreaId = event.target.dataset.areaid;var that = thisareaId = selectAreaIdfor(var i = 0;i

在js代码里面接收text的点击事件并接收到传递过来的参数,遍历areas数组,将选中的area的isSelect属性设置为true,其余设置为false,再刷新wxml的areas部分。

"微信小程序怎么修改radio大小"的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站,小编将为大家输出更多高质量的实用文章!

0