小程序改变radio大小,微信小程序修改radio大小

惠民小程序小编了解到，微信小程序成为当下热门话题，下面从多个方面来谈谈小程序改变radio大小,微信小程序修改radio大小。

最新消息， 5月2日，实用技能学习平台网易云课堂对外宣布，发布与腾讯微信团队合作的《初级小程序开发工程师》微专业课程，为共同培育小程序专业人才做出贡献，同时也将为国内想学习小程序课程的兴趣爱好者带来一次免费学习机会。 微信小程序是一种不需要下载安装即可使用的应用，在推

小程序自带的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部分。

ok就这么简单。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!