注冊

微信小程序radio樣式能不能自定義?

2020-09-27
導(dǎo)讀:小程序的radio樣式自定義是可以的,直接用display:none隱藏掉,然后用新標簽實現(xiàn)。...
小程序的radio樣式不能自定義嗎?
微信小程序radio樣式能不能自定義?

小程序的radio樣式自定義是可以的,直接用display:none隱藏掉,然后用新標簽實現(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è)計樣式*/
}
.ui-radio.checked .text {
/*設(shè)計樣式*/
}
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發(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樣式能不能自定義?

重磅推薦:小程序開店目錄

第一部分:小商店是什么

第二部分:如何開通一個小商店

第三部分:如何登錄小商店

第四部分:開店任務(wù)常見問題

第五部分:小商店可以賣什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收貨/物流

第九部分:小程序怎么結(jié)算

第十部分:小程序客服

第十一部分:電商創(chuàng)業(yè)

第十二部分:小程序游戲開發(fā)