微信小程式--自定義radio元件樣式

前言

首先看一下微信裡邊的樣式，不同機型可能也略有不同

再來看一下自定義樣式，分別展示了default、active和disabled狀態

自定義樣式的好處就是可以適應不同的機型，展示效果基本一致，樣式上更美觀一些。

程式碼實現

wxml檔案

	<radio-group class="radio-group" bindchange="radioChange">
		<label class="radio {{!item.show?'disabled':item.checked?'active':'' }}" wx:for="{{items}}">
			<radio value="{{item.value}}" checked="{{item.checked}}" disabled="{{!item.show}}" style="display:none;"/>
			{{item.name}}
		</label>
	</radio-group>
複製程式碼

注意

1. 動態修改class樣式，需要判斷是否可選，再判斷一下是否是啟用狀態。
2. 自定義樣式要把預設的radio標籤隱藏掉，這裡通過display:none的方式。

wxss檔案

.radio-group .radio {
    background: #FFFFFF;
    border: 1px solid #D6D6D6;
    border-radius: 2px;
    padding:3px 12px;
    text-align:center;
    margin-right:3px;
}
.radio-group .radio.active {//此處省略base64圖片地址，太長了！！！
    background: #ffffff url(data:image/png;base64,iVBORw0KGgo...) no-repeat right bottom;
    border-color: #0097e0;
    color: #0097e0;
    background-size: 14px;
}

.radio-group .radio.disabled {
    background: #f0f0f0;
    border: 0;
    color: #0097e0;
    color: #9fa2ae;
}
複製程式碼

注意

1. 樣式上沒什麼難點，只需要準備好預設樣式，選中樣式和禁止狀態下的樣式即可。

js檔案

• 單選框資料結構

 items: [{
        name: '360',
        value: '360X',
        show:true,
    },
    {
        name: '400',
        value: '400Y',
        checked: 'true',
        show:true,
    },
    {
        name: '260',
        value: '260Z',
        show:false,
    }
]
複製程式碼

• change事件

var items = this.data.items;
var currentItemName = e.detail.value;
for (var i = 0; i < items.length; i++) {
    if (currentItemName.indexOf(items[i].value) != -1) {
        items[i].checked = true;
    } else {
        items[i].checked = false;
    }
}
this.setData({
    items: items
})
複製程式碼

效果圖