使用纯css实效tab、投诉列表效果（附小程序代码片段）

利用radio、checkbox选中的属性选择器，实现tab效果、多选列表功能；

一、优点：

1. 免去使用选索引、事件，来判断当前选中是哪个。
2. 使用起来代码十分简洁、逻辑更清晰。

二、效果：

（纯css实现tab效果）

（纯css实现多选选择）

三、小程序代码片段
developers.weixin.qq.com/s/M6XWTMm67…

四、投诉列表页代码

<!--wxml 代码-->
<view class="page">
  <view class='complaint-title'>请选择投诉原因</view>
  <checkbox-group bindchange="complaintChange">
    <label class='complaint-item' wx:for="{{complaintType}}" wx:key="index">
      <view class='item-content'>{{item}}</view>
      <icon class="item-icon" type="success_no_circle" size="16"></icon>
      <checkbox class="item-checkbox" value="{{item}}" hidden />
    </label>
  </checkbox-group>
</view>

/* wxss 代码 */
page {
  background-color: #f2f1f1;
}

.complaint-title {
  font-size: 26rpx;
  color: #a0a0a0;
  margin-left: 24rpx;
  margin-top: 26rpx;
  margin-bottom: 16rpx;
}

.complaint-item {
  height: 80rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24rpx;
}

.item-content {
  font-size: 32rpx;
  color: #2b2b2b;
}

.item-icon{
  visibility: hidden;
}

.complaint-item[aria-checked="true"] .item-icon {
  visibility: visible;
}

// js 代码
Page({
  data: {
    complaintType: ["色情", "诱导", "骚扰", "欺诈", "恶意营销", "与服务类目不符", "违法犯罪", "不实信息", "收集隐私信息"],
  },
  complaintChange(e) {
    console.log(e.detail);
  },
});