小程式自帶的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}}" scroll-y="true" style="height: 100px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
    <view class="radio-group" >
        <label wx:for="{{areas}}
 
" wx:for-item="area">
            <text bindtap="selectAreaOk" data-areaId="{{area.id}}">{{area.name}}</text> 
            <icon wx:if="{{area.isSelect}}" type="success" size="10"/> 
            <icon wx:else type="circle" size="10"/>
        </label>
    </view>
</scroll-view
 
>

先設定一個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 = this
     areaId = selectAreaId
     for(var i = 0;i<this.data.areas.length;i++){
       if(this.data.areas[i].id==selectAreaId){
         this.data.areas[i].isSelect=true
       }else{
         this.data.areas[i].isSelect=false
       }
     }
     this.setData({
       areas:this.data.areas,
       skus:[],
       hideArea:true
     })
     getSkus(that,selectAreaId)
  }

在js程式碼裡面接收text的點選事件並接收到傳遞過來的引數，遍歷areas陣列，將選中的area的isSelect屬性設定為true，其餘設定為false，再重新整理wxml的areas部分。

ok就這麼簡單。