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
})
},
});
效果图: