如何在微信小程序自定义个性化radio组件

微信小程序的radio组件是标准化的，做出来的视觉效果千篇一律。笔者尝试做了一个自定义的radio组件，效果很好，与大家分享一下。废话不多说，上干货：
1、WXML模板：

<!--pages/common/lib/common.wxml--><template name="zradio"><view class="radiobox" data-index="{{index}}" bindtap="radioChange">   <view wx:if="{{zradio[index].status}}" class="checked}}">·</view>   <view wx:else class="unchecked}}"></view>   <view wx:if="{{zradio[index].status}}" style="color:red;">{{zradio[index].name}}</view>   <view wx:else style="color:#000000;">{{zradio[index].name}}</view> </view></template>

2、WXML：

<!--pages/radio/radio.wxml--><import src="/pages/common/lib/common.wxml" /><view class="container">  <template is="zradio" data="{{index: 0, zradio: zradio }}"/>  <template is="zradio" data="{{index: 1, zradio: zradio }}"/>  <template is="zradio" data="{{index: 2, zradio: zradio }}"/></view>

3、WXSS：

/* pages/radio/radio.wxss */.container{  height: 300rpx;  width:300rpx;  display:flex;  flex-direction: column;  justify-content: space-around;  align-items: flex-start;  margin-top:200rpx;    margin-left:100rpx;   border: 1rpx solid red; }.radiobox{  display:flex;  flex-direction: row;  align-items: center;}.checked {  display:flex;  flex-direction: row;  justify-content: center;  align-items: center;  height:30rpx;  width:30rpx;  border-radius: 50%;  color:red;  border:1rpx solid red;}.unchecked {  height:30rpx;  width:30rpx;  border-radius: 50%;  color:black;  border:1rpx solid black;}

4、JS：

//pages/radio/radio.jsPage({  data: {    zradio: [      { name: '中国', status: false },      { name: '美国', status: false },      { name: '英国', status: false }    ]  },  radioChange: function (e) {    var zradio = this.data.zradio;    var index = e.currentTarget.dataset.index;    console.log(e);    if (this.data.zradio[index].status) {      zradio[index].status = false;    } else {      zradio[index].status = true;    };    this.setData({      zradio: zradio    })  }})

**后记：
如果大家想做出自己的风格，只需要修改WXSS文件即可。**