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

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

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;
}