在 `
van-list` 与 `
checkbox` 结合
使用时实现全选和反选功能，可通过设置一个全选
复选框来控制所有列表项的
选中状态。以下分别给出 Vue 和
微信小程序的实现示例。
### Vue 实现示例
```vue
<template>
<div>
<
van-list
v
-model="loading"
:finished="finished"
finished
-text="没有更多了"
@load="onLoad"
>
<
van-checkbox-group v
-model="selectedIds">
<
van-checkbox
v
-for="item in list"
:key="item.id"
:name="item.id"
>
<
van-cell :title="item.title" />
</
van-checkbox>
</
van-checkbox-group>
</
van-list>
<
van-checkbox v
-model="checkedAll" @change="toggleAll">全选</
van-checkbox>
</div>
</template>
<script>
import {
VanList,
VanCheckbox,
VanCheckboxGroup,
VanCell } from '
vant';
export default {
components: {
VanList,
VanCheckbox,
VanCheckboxGroup,
VanCell
},
data() {
return {
list: [],
loading: false,
finished: false,
selectedIds: [],
checkedAll: false
};
},
methods: {
onLoad() {
// 模拟异步请求
setTimeout(() => {
for (let i = 0; i < 10; i++) {
this.list.push({
id: this.list.length + 1,
title: `Item ${this.list.length + 1}`
});
}
// 加载状态结束
this.loading = false;
// 数据全部加载完成
if (this.list.length >= 40) {
this.finished = true;
}
}, 1000);
},
toggleAll() {
if (this.checkedAll) {
this.selectedIds = this.list.map(item => item.id);
} else {
this.selectedIds = [];
}
}
}
};
</script>
```
###
微信小程序实现示例
在 `app.json` 中引入组件：
```json
{
"usingComponents": {
"
van-list": "/path/
vant
-weapp/list/index",
"
van-checkbox": "/path/
vant
-weapp/
checkbox/index",
"
van-checkbox-group": "/path/
vant
-weapp/
checkbox-group/index",
"
van-cell": "/path/
vant
-weapp/cell/index"
}
}
```
在 `.wxml` 文件中
使用组件：
```xml
<
van-list
loading="{{loading}}"
finished="{{finished}}"
finished
-text="没有更多了"
bind:load="onLoad"
>
<
van-checkbox-group bind:change="onChange" value="{{selectedIds}}">
<block wx:for="{{list}}" wx:key="id">
<
van-checkbox name="{{item.id}}">
<
van-cell title="{{item.title}}" />
</
van-checkbox>
</block>
</
van-checkbox-group>
</
van-list>
<
van-checkbox value="{{checkedAll}}" bind:change="toggleAll">全选</
van-checkbox>
```
在 `.js` 文件中实现逻辑：
```
javascript
Page({
data: {
list: [],
loading: false,
finished: false,
selectedIds: [],
checkedAll: false
},
onLoad() {
// 模拟异步请求
setTimeout(() => {
const newList = [];
for (let i = 0; i < 10; i++) {
newList.push({
id: this.data.list.length + i + 1,
title: `Item ${this.data.list.length + i + 1}`
});
}
this.setData({
list: this.data.list.concat(newList),
loading: false
});
if (this.data.list.length >= 40) {
this.setData({
finished: true
});
}
}, 1000);
},
onChange(e) {
const selectedIds = e.detail;
const checkedAll = selectedIds.length === this.data.list.length;
this.setData({
selectedIds,
checkedAll
});
},
toggleAll(e) {
const checkedAll = e.detail;
if (checkedAll) {
const allIds = this.data.list.map(item => item.id);
this.setData({
selectedIds: allIds,
checkedAll: true
});
} else {
this.setData({
selectedIds: [],
checkedAll: false
});
}
}
});
```
文章讲述了在使用vant-ui框架开发微信小程序时，checkbox组件点击无法选中的问题，通过添加onChange事件并更新checked值来解决，同时展示了选中和取消选中的效果。
扫一扫
6652
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
