小程序自定义性别单选按钮

wxml

<label class="infoTextSmaill">性别</label>
<view class="gender" wx:for="{{gender}}" wx:key="index" data-index="{{index}}" bindtap="gender">
	<image wx:if="{{index == selectedIndex}}" class="genderImg" src="{{item.iconActive}}"></image>
	<image wx:else class="genderImg" src="{{item.icon}}"></image>
	<text class="genderText">{{item.value}}</text>
</view>

JS

data: {
		gender: [
		{ 
			name: 'male', 
			value: '男', 
			icon: 'http://test.com/maleGrey.png',
			iconActive: 'http://test.com/maleGreen.png'
			},
		{ 
			name: 'famale', 
			value: '女',
			icon: 'http://test.com/femaleGrey.png',
			iconActive: 'http://test.com/femaleGreen.png'
		},
],
},
/**
* 性别选择
*/
gender: function (e) {
	var index = e.currentTarget.dataset.index;
	this.setData({
		selectedIndex: index
	})
},