小程序自帶的radio似乎是不能調(diào)整大小的，在項(xiàng)目中使用時很不方便，時常會影響整個界面的效果。為了解決這個問題，我使用text標(biāo)簽結(jié)合icon標(biāo)簽實(shí)現(xiàn)了radio效果。

這里我們實(shí)現(xiàn)一個選擇地區(qū)的單選框

1.使用radio的效果

可以清楚的看出來圓圈的大小和字體的大小非常不協(xié)調(diào)。至于radio如何實(shí)現(xiàn)的，這里就不贅述了，大家可以在官方教程中學(xué)習(xí)簡易教程-小程序

2.使用text加 icon實(shí)現(xiàn)radio效果

先上效果圖 

這里的icon可以調(diào)整大小，調(diào)整位置。

接下來看看如何實(shí)現(xiàn)的吧。

思路： 
左邊一個< text>右邊一個< icon>來實(shí)現(xiàn)radio效果。 
以列表方式排列所有地區(qū)area，給地區(qū)設(shè)置isSelect屬性，如果isSelect=true則顯示的icon 的type為success否則icon的type顯示circle。 
當(dāng)text被點(diǎn)擊時，根據(jù)area的id來確定被點(diǎn)擊的text，被點(diǎn)擊的text對應(yīng)的area的isSelect屬性設(shè)置為true否則設(shè)置為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>

先設(shè)定一個scroll-view，設(shè)置選擇框的父容器位置大小其中radio-group的wxss設(shè)定了容器內(nèi)字體大小已經(jīng)排練方式

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

接下來遍歷了areas數(shù)組用來顯示 地區(qū)名稱+icon 其中為地區(qū)名稱 < text>設(shè)置了 bindtap、data-areaId 。這里要跟js進(jìn)行數(shù)據(jù)交互，其中data-areaId為傳遞過去的參數(shù)。

根據(jù)area對象的isSelect屬性來確定顯示的< icon>,其中一個是圓圈，一個是綠色的對勾。示例中icon的大小設(shè)置為10，這里可以隨意改變其大小。

接下來是js代碼部分。

1. //選擇區(qū)域
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的點(diǎn)擊事件并接收到傳遞過來的參數(shù)，遍歷areas數(shù)組，將選中的area的isSelect屬性設(shè)置為true，其余設(shè)置為false，再刷新wxml的areas部分。

ok就這么簡單。