本文實例為大家分享了微信小程序自定義單項選擇器樣式的具體代碼，供大家參考，具體內容如下
效果：
wxml：
<view bindchange="radioChange"> <view class='list_item' wx:for="{{radioValues}}" data-index="{{index}}" bindtap='radioChange' style="{{index == radioValues.length-1?'border-bottom:0':''}}"> <text style='color:rgb(96,96,96)'>{{item.value}}</text> <view wx:if="{{item.selected}}" class='item'> <view style='width:20rpx;height:20rpx;background-color:rgb(144,144,144);border-radius:100%;'></view> </view> <view wx:else class='item'></view> </view> </view>wcss：
.list_item{ display: flex; justify-content: space-between; align-items: center; margin:0 25rpx; width:700rpx; font-size: 30rpx; color: rgb(79,79,79); padding: 28rpx 0; border-bottom:1px solid rgb(209,209,209); } .item{ width: 28rpx; height: 28rpx; border: 2px solid rgb(144,144,144); border-radius: 100%; display: flex; align-items: center; justify-content: center; }js：
Page({ data: { radioValues: [ { 'value': '未付款訂單', 'selected': false }, { 'value': '進行中的訂單', 'selected': false }, { 'value': '完成了的訂單', 'selected': false }, { 'value': '所有訂單', 'selected': true }, ] }, onLoad: function (options) { }, radioChange:function(e){ var index = e.currentTarget.dataset.index; var arr = this.data.radioValues; for (var v in arr){ if (v == index){ arr[v].selected = true; }else{ arr[v].selected = false; } } this.setData({ radioValues:arr }) } })以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答
