小程序创建一个数组,里面包含多个数据,可多选,根据pactCode如果是101,那么就把数组里面pactCode为101的都勾选,可点击取消单项
时间: 2024-09-12 13:15:33 浏览: 33
在微信小程序中,如果你想创建一个多选列表,其中一个条件是当`pactCode`为'101'时默认勾选,用户还可以手动选择或取消某一项,可以使用`checkbox-group`组件结合数组数据来实现。以下是一个基本的步骤和示例代码:
1. 首先,在data对象中初始化一个数组,包含你需要的数据,包括`pactCode`和一个初始状态(如`selected`):
```javascript
Page({
data: {
dataSource: [
{ pactCode: '101', name: '选项A', selected: true },
{ pactCode: '201', name: '选项B', selected: false },
... // 其他数据项
],
},
})
```
2. 使用`checkbox-group`组件展示数组:
```html
<view class="list">
<block wx:for="{{ dataSource }}" wx:key="*this">
<checkbox value="{{ item.pactCode }}">{{ item.name }}</checkbox>
</block>
</view>
```
3. 用户交互可以通过`bindchange`事件监听,更新数据源中对应项的`selected`值:
```html
<view class="list" bindchange="handleCheckboxChange">
<!-- 上述代码 -->
</view>
<script>
Page({
// ...
handleCheckboxChange(e) {
const itemIndex = e.detail.index; // 获取当前选中的索引
const item = this.data.dataSource[itemIndex];
item.selected = e.detail.value; // 根据用户操作更新selected状态
},
// ...
})
</script>
```
4. 如果想让所有`pactCode`为'101'的默认选中,可以在`onLoad`生命周期钩子里设置:
```javascript
onLoad() {
for (let i = 0; i < this.data.dataSource.length; i++) {
if (this.data.dataSource[i].pactCode === '101') {
this.data.dataSource[i].selected = true;
}
}
}
```
阅读全文