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

 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}}" />
        <!-- <image hidden="{{item.checked}}" mode="widthFix" src="../../img/tick.png"></image> -->
      </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;
}

js

const app = getApp();
Page({
  data: {
   
    items: [
      {value: 'USA', name: '美国', checked: false},
      {value: 'CHN', name: '中国', checked: false},
      {value: 'BRA', name: '巴西',checked: false},
      {value: 'JPN', name: '日本',checked: false},
      {value: 'ENG', name: '英国',checked: false},
      {value: 'FRA', name: '法国',checked: false}
    ]

  },
 
  checkboxChange(e) {
    console.log('checkbox发生change事件,携带value值为:', e.detail.value)

    const items = this.data.items
    const values = e.detail.value
    for (let i = 0, lenI = items.length; i < lenI; ++i) {
      items[i].checked = false

      for (let j = 0, lenJ = values.length; j < lenJ; ++j) {
        if (items[i].value === values[j]) {
          items[i].checked = true
          break
        }
      }
    }

    this.setData({
      items
    })
  },
 
});

 

效果图:

 

 

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值