小程序自带的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文件代码部分：

1. <scroll-view hidden="{{hideArea}}" scroll-y="true" style="height: 100px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
2. <view class="radio-group" >
3. <label wx:for="{{areas}}" wx:for-item="area">
4. <text bindtap="selectAreaOk" data-areaId="{{area.id}}">{{area.name}}</text>
5. <icon wx:if="{{area.isSelect}}" type="success" size="10"/>
6. <icon wx:else type="circle" size="10"/>
7. </label>
8. </view>
9. </scroll-view>

先设定一个scroll-view，，设置选择框的父容器位置巨细其中radio-group的wxss设定了容器内字体巨细已经排演方式

1. .radio-group{
2. font-size: 26rpx;
3. display: flex;
4. flex-direction: column;
5. }

接下来遍历了areas数组用来显示 地区名称+icon 其中为地区名称 < text>设置了 bindtap、data-areaId 。。。这里要跟js举行数据交互，，其中data-areaId为转达已往的参数。。。

凭证area工具的isSelect属性来确定显示的< icon>,其中一个是圆圈，，一个是绿色的对勾。。。示例中icon的巨细设置为10，，这里可以随意改变其巨细。。。

接下来是js代码部分。。。

1. //选择区域
2. selectAreaOk: function(event){
3. var selectAreaId = event.target.dataset.areaid;
4. var that = this
5. areaId = selectAreaId
6. for(var i = 0;i<this.data.areas.length;i++){
7. if(this.data.areas[i].id==selectAreaId){
8. this.data.areas[i].isSelect=true
9. }else{
10. this.data.areas[i].isSelect=false
11. }
12. }
13. this.setData({
14. areas:this.data.areas,
15. skus:[],
16. hideArea:true
17. })
18. getSkus(that,selectAreaId)
19. }

在js代码内里吸收text的点击事务并吸收到转达过来的参数，，遍历areas数组，，将选中的area的isSelect属性设置为true，，其余设置为false，，再刷新wxml的areas部分。。。

ok就这么简朴。。。