微信小程序radio樣式怎么自定義

本篇內(nèi)容介紹了“微信小程序radio樣式怎么自定義”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

小程序的radio樣式自定義是可以的，直接用display:none隱藏掉，然后用新標(biāo)簽實(shí)現(xiàn)。

<radio-group bindchange="radioChange"> 
<label class="ui-radio {{item.checked==true?'active':''}}" wx:for="{{items}}>checked="{{item.checked}}">radio><text class="text">{{item.name}}text>label>radio-group>

.ui-radio radio,.ui-radio checkbox {
  display: none;
}
.ui-radio .text {
/*設(shè)計(jì)樣式*/
}
.ui-radio.checked .text {
/*設(shè)計(jì)樣式*/
}

Page({
  data: {
    items: [
      {value: 'USA', name: '美國(guó)'},
      {value: 'CHN', name: '中國(guó)', checked: 'true'},
      {value: 'BRA', name: '巴西'},
      {value: 'JPN', name: '日本'},
      {value: 'ENG', name: '英國(guó)'},
      {value: 'FRA', name: '法國(guó)'},
    ]
  },
  radioChange: function(e) {
    console.log('radio發(fā)生change事件，攜帶value值為：', e.detail.value)

    var items = this.data.items;
    for (var i = 0, len = items.length; i < len; ++i) {
      items[i].checked = items[i].value == e.detail.value
    }

    this.setData({
      items: items
    });
  }
})

把 radio 元素隱藏, 寬度設(shè)為 0, 切兩張圖片或者 svg，用 label 元素的 background 屬性自定義 radio.

“微信小程序radio樣式怎么自定義”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！