小程序改變r(jià)adio大小,微信小程序修改radio大小
小程序自帶的radio似乎是不能調(diào)整大小的,在項(xiàng)目中使用時(shí)很不方便,時(shí)常會(huì)影響整個(gè)界面的效果。為了解決這個(gè)問(wèn)題,使用text標(biāo)簽結(jié)合icon標(biāo)簽實(shí)現(xiàn)了radio效果。
接下來(lái)看看如何實(shí)現(xiàn)的吧。
思路:
左邊一個(gè)< text>右邊一個(gè)< icon>來(lái)實(shí)現(xiàn)radio效果。
以列表方式排列所有地區(qū)area,給地區(qū)設(shè)置isSelect屬性,如果isSelect=true則顯示的icon 的type為success否則icon的type顯示circle。
當(dāng)text被點(diǎn)擊時(shí),根據(jù)area的id來(lái)確定被點(diǎn)擊的text,被點(diǎn)擊的text對(duì)應(yīng)的area的isSelect屬性設(shè)置為true否則設(shè)置為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>
先設(shè)定一個(gè)scroll-view,設(shè)置選擇框的父容器位置大小其中radio-group的wxss設(shè)定了容器內(nèi)字體大小已經(jīng)排練方式
- .radio-group{
- font-size: 26rpx;
- display: flex;
- flex-direction: column;
- }
接下來(lái)遍歷了areas數(shù)組用來(lái)顯示 地區(qū)名稱+icon 其中為地區(qū)名稱 < text>設(shè)置了 bindtap、data-areaId 。這里要跟js進(jìn)行數(shù)據(jù)交互,其中data-areaId為傳遞過(guò)去的參數(shù)。
根據(jù)area對(duì)象的isSelect屬性來(lái)確定顯示的< icon>,其中一個(gè)是圓圈,一個(gè)是綠色的對(duì)勾。示例中icon的大小設(shè)置為10,這里可以隨意改變其大小。
接下來(lái)是js代碼部分。
- //選擇區(qū)域
- 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的點(diǎn)擊事件并接收到傳遞過(guò)來(lái)的參數(shù),遍歷areas數(shù)組,將選中的area的isSelect屬性設(shè)置為true,其余設(shè)置為false,再刷新wxml的areas部分。
ok就這么簡(jiǎn)單。
第二部分:如何開通一個(gè)小商店