1. 基础 Checkbox-group:
<checkbox-group bindchange="checkboxChange">
<label class="weui-cell weui-check__label" wx:for="{{checkboxItems}}">
<checkbox class="weui-check" value="{{item.value}}" checked="{{item.checked}}" />
<view class="weui-cell__hd"><image src="{{item.icon}}" style="width: 50px; height: 50px;"></image></view>
<view class="weui-cell__bd">
<view class="weui-check__title">{{item.name}}</view>
<view class="weui-check__desc">{{item.desc}}</view>
</view>
</label>
</checkbox-group>
在上述示例中,使用了 checkbox-group 包裹了一组 checkbox,并通过 bindchange 绑定了 checkboxChange 函数用于处理复选框状态改变的事件。其中,checkboxItems 是在 JS 文件中定义的数组,包含了每个复选框的相关信息。
2. JS 文件中处理状态变化:
在小程序的 JS 文件中,需要定义 checkboxChange 函数来处理复选框状态的变化:
Page({
data: {
checkboxItems: [
{ name: '复选框1', value: 'value1', icon: '/images/icon1.png', checked: false, desc: '描述1' },
{ name: '复选框2', value: 'value2', icon: '/images/icon2.png', checked: false, desc: '描述2' },
// 其他复选框...
],
},
checkboxChange: function (e) {
const items = this.data.checkboxItems;
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({
checkboxItems: items,
});
},
});
在上述示例中,当复选框的状态发生变化时,通过 checkboxChange 函数更新相应的数据状态。
这是一个简单的 WeUI Checkbox-group 的使用示例。你可以根据实际需求进一步扩展和定制复选框的样式和行为,以满足项目的需求。
转载请注明出处:http://www.zyzy.cn/article/detail/1330/微信小程序