⼩程序⾃定义单选，单选使⽤两个之中的单选 推荐官⽅的：
<view class='pay_box'>
<!--在最外⾯包住-->
<radio-group class="radio-group" bindchange="radioChange">
<view class='common_pay' wx:for="{{paywaylist}}" wx:key="{{index}}">
<text>{{item}}</text>
<label class="radio">
<radio value="{{item}}" checked="{{item.checked}}" />
</label>
</view>
<!-- <view class='common_pay'>
htmlradio添加切换事件<text>⽀付</text>
<label class="radio">
<radio value="{{item.name}}" checked="{{item.checked}}" />
</label>
</view> -->
</radio-group>
<view>
js
//选择
radioChange: function (e) {
console.log(e)
/
/ console.log('radio发⽣change事件，携带value值为：', e.detail.value)
this.setData({
payway: e.detail.value
})
},
⼩程序-radio(⾃定义)：
wxml:
<view class="select_box">
<view wx:for="{{list}}" class="common_box" wx:key="index" data-id="{{index}}" bindtap='getradio'>
<view class="radio {{item.checked?'hide':'show'}}'">{{item.name}}</view>
<view class="radiopic {{item.checked?'show':'hide'}}'">
<image src="../../images/check.png"></image>
</view>
<text>{{item.value}}</text>
</view>
</view>
wxjs:
data: {
list: [
{ name: 'A', value: '12' ,checked: false},
{ name: 'B', value: '11', checked: false},
{ name: 'C', value: '13', checked: false},
{ name: 'C', value: '13', checked: false},      { name: 'D', value: '10', checked: false},    ]
},
getradio: function (e) {
let index = e.currentTarget.dataset.id;
let list = this.data.list;
for(let i=0; i<list.length; i++){
this.data.list[i].checked = false;
}
if (list[index].checked){
this.data.list[index].checked = false;
}else{
this.data.list[index].checked = true;
}
let selectlist = list.filter((item,index)=>{
return item.checked == true;
})
this.setData({list:this.data.list})
console.log(selectlist)
},
wxss:
.select_box {
padding-top: 20rpx;
display: flex;
flex-direction: column;
}
.select_box mon_box {
display: flex;
align-items: center;
margin-bottom: 20rpx;
}
.select_box mon_box text {
font-size: 28rpx;
color: #333333;
padding-left: 20rpx;
display: block;
width: 80%;
word-wrap: break-word;
word-break: break-all;
}
.select_box mon_box .radio {
width: 55rpx;
height: 55rpx;
border-radius: 50%;
border: 1rpx solid #ccc;
font-size: 30rpx;
display: flex;
align-items: center;
justify-content: center;
}
.select_box mon_box .radiopic {
width: 56rpx;
height: 56rpx;
border-radius: 50%;
overflow: hidden;
}
.select_box mon_box .radiopic image {  width: 100%;
width: 100%;
height: 100%;
}
.show {
display: block;
}
.
hide {
display: none !important;
}
wxcss:
.select-only{
width: 40%;
display: flex;
justify-content: space-between ;
align-items: center;
margin-top: 30rpx;
}
.
flexa{
display: flex;
flex-direction: row;
}
.so-3{
width: 36rpx;
height: 36rpx;
border-radius: 50%;
border: 1px solid #7C7C7C;
margin-right: 20rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.so-2{
width: 24rpx;
height: 24rpx;
border-radius: 50%;
background-color: transparent;
}
.select-only .active1{
border: 1px solid #14a1fd;
}
.select-only .active2{
background-color:  #14a1fd;
}
wxml:
<view class='select-only'>
<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>
js:
data:
selectIndex:0,
selectFn:function(e){
let selectIndex = e.currentTarget.dataset.selectindex;    this.setData({
selectIndex: selectIndex
})
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。