0x0 背景

微信小程序的radio按钮太丑了，因此笔者使用view做了一个好看的多选一按钮；

0x1 效果图

image.png

0x2 代码
html代码如下

<view class="type-button-flex">
     <view class="type-flex-item {{type === 0 ? 'type-active' : ''}}" bindtap="switchType" data-type="0">
         <mp-icon wx:if="{{type===0}}" icon="done2" color="white" size="{{25}}"></mp-icon>
        我是乘客
     </view>
     <view class="type-flex-item {{type === 1 ? 'type-active' : ''}}" bindtap="switchType" data-type="1">
         <mp-icon wx:if="{{type===1}}" icon="done2" color="white" size="{{25}}"></mp-icon>
         我是司机
     </view>
</view>

css代码如下：

.type-button-flex {
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    padding: 0 20rpx;
}

.type-flex-item {
    border-style: solid;
    border-color: #07c160;
    width: 100%;
    height: 80rpx;
    display: flex;    /*设置显示样式**/
    align-items: center;    /**子view垂直居中*/
    vertical-align: center; /**垂直居中*/
    justify-content: center; /**内容居中*/
    flex-direction:row;
}

.type-active {
    background-color: #07c160;
    color: white;
}

js监听函数如下：

    switchType(e) {
        let type = parseInt(e.currentTarget.dataset.type);
        console.log("type", type)
        this.setData({
            type: type
        })
    },