微信小程序组件 自定义单选

 

<view class='userperson'>

<view class='f30 flexca'>请选择您的注册身份</view>

<view class='select-only f30'>

<view class='flexa '>

<view class="so-3 flexca {{selectIndex==0?'active1':''}}" data-selectIndex='0' bindtap='selectFn'>

<view class="so-2 {{selectIndex==0?'active2':''}}"></view>

</view>

<text>老师</text>

</view>

<view class='flexa'>

<view class="so-3 flexca {{selectIndex==1?'active1':''}}" data-selectIndex='1' bindtap='selectFn'>

<view class="so-2 {{selectIndex==1?'active2':''}}"></view>

</view>

<text>校长</text>

</view>

<view class='flexa'>

<view class="so-3 flexca {{selectIndex==2?'active1':''}}" data-selectIndex='2' bindtap='selectFn'>

<view class="so-2 {{selectIndex==2?'active2':''}}"></view>

</view>

<text>普通用户</text>

</view>

</view>

</view>

 

 

.userperson{

margin-top: 40rpx;

}

.userperson>view:first-child{

color: #14a1fd;

}

button{

margin-top: 70rpx;

width: 100%;

border-radius: 50rpx;

color: white;

">#14a1fd;

box-shadow: 0 0 4rpx 1rpx rgba(20,161,253,0.7)

}

.select-only{

width: 100%;

display: flex;

justify-content: space-between ;

align-items: center;

margin-top: 30rpx;

}

.so-3{

width: 36rpx;

height: 36rpx;

border-radius: 50%;

border: 1px solid #7C7C7C;

margin-right: 20rpx;

}

.so-2{

width: 24rpx;

height: 24rpx;

border-radius: 50%;

">transparent;

}

.select-only .active1{

border: 1px solid #14a1fd;

}

.select-only .active2{

">#14a1fd;

}

 

 

data:

selectIndex:0,

selectFn:function(e){

let selectIndex = e.currentTarget.dataset.selectindex;

this.setData({

selectIndex: selectIndex

})

},