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

本篇內容介紹了“微信小程序radio樣式怎么自定義”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

小程序的radio樣式自定義是可以的，直接用display:none隱藏掉，然后用新標簽實現。

<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 {
/*設計樣式*/
}
.ui-radio.checked .text {
/*設計樣式*/
}

Page({
  data: {
    items: [
      {value: 'USA', name: '美國'},
      {value: 'CHN', name: '中國', checked: 'true'},
      {value: 'BRA', name: '巴西'},
      {value: 'JPN', name: '日本'},
      {value: 'ENG', name: '英國'},
      {value: 'FRA', name: '法國'},
    ]
  },
  radioChange: function(e) {
    console.log('radio發生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 元素隱藏, 寬度設為 0, 切兩張圖片或者 svg，用 label 元素的 background 屬性自定義 radio.

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