微信小程序多选功能，复选功能

缺乏、安全感 2022-12-20 12:42 209阅读 0赞

wxml

<checkbox-group bindchange="checkboxChange">
      <label class="team_info_item" wx:for="{
       {items}}" wx:key="index">
        <view class="item_icon">
          <image mode="widthFix"
            src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=412796477,2371228780&fm=111&gp=0.jpg"></image>
        </view>
        <view class="team_content">
          <view>
            <view class="team_name">{
       {item.name}}</view>
            <view class="team_leader">职位：{
       {item.value}}</view>
          </view>
          <view class="tick">
            <checkbox class="round blue" value="{
       {item.value}}" checked="{
       {item.checked}}" />
            
          </view>
        </view>
    
      </label>
    </checkbox-group>

wxss

.team_info_item {
      display: flex;
      padding-left: 52rpx;
      padding-bottom: 20rpx;
    }
    
    .team_info_item .item_icon image {
      width: 90rpx;
      border-radius: 50%;
    }
    
    .team_info_item .team_content {
      display: flex;
      justify-content: space-between;
      padding-left: 28rpx;
      padding-right: 60rpx;
      width: 100%;
      color: #4a4a4a;
    
    }
    
    .team_info_item .team_content .team_name {
      font-size: 32rpx;
      font-weight: 600rpx;
      font-family: "SourceHanSansCN-Medium";
    }
    
    .team_info_item .team_content .team_leader {
      font-size: 28rpx;
      font-family: "SourceHanSansCN-Normal";
    
    }
    
    .team_info_item .team_content .tick {
      display: flex;
      align-items: center;
      width: 45rpx;
    }
    
    .team_info_item .team_content .tick image {
      width: 100%;
    }
    
    ::-webkit-scrollbar {
      width: 0;
      height: 0;
      color: transparent;
    }

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70]: /images/20221120/52c9f47dc6f1447682c72bf24329a214.png