微信小程序怎么修改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 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 = thisareaId = selectAreaIdfor(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部分。

“微信小程序怎么修改radio大小”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！