微信小程序常见组件布局样式——单选框的使用和禁用

微信小程序常见组件布局样式

1、Radio 单选框样式与单元框禁用

JS

data:{
    
    
    uploadProjectRadio: '0',
}

onChangeProjectStatus(event) {
    
    
  this.setData({
    
    
    radio: event.detail,
  });
},

WXML

<!-- 项目状态 -->
<view class="changeStatus">
  <text style="color: 323233;font-size: 27rpx;margin-left: 10rpx;">项目状态</text>
  <van-radio-group value="{
    
    { uploadProjectRadio }}" bind:change="onChangeProjectStatus" direction="horizontal">
    <van-radio name="0">
      <text style="color: 323233;font-size: 27rpx;margin-left: 10rpx;">未完成</text>
    </van-radio>
  </van-radio-group>
  <van-radio-group value="{
    
    { radio }}" disabled bind:change="onChange">
    <van-radio name="2">
      <text style="color: 323233;font-size: 27rpx;margin-left: 10rpx;">已完成</text>
    </van-radio>
  </van-radio-group>
</view>

WXSS

/* 单选框选中样式 */
.changeStatus{
    
    
  margin-top: 20rpx;
  display: flex;
  padding-left: 20rpx;
}
.changeStatus .van-radio-group{
    
    
  padding-left: 130rpx;
}