在 `
vant-popup` 中使用 `
vant-list`，当数据较少
时第二次打开弹框会多次触发 `onload` 事件，可从以下几个方面解决：
### 控制加载状态
要保证在加载数据
时，`loading` 状态设置为 `true`，避免重复触发 `load` 事件。加载完成后，根据实际情况设置 `finished` 状态。
```
vue
<template>
<
van-popup v
-model="showPopup">
<
van-list
v
-model:loading="loading"
:finished="finished"
@load="onLoad"
>
<!
-- 列表内容
-->
<div v
-for="item in
listData" :key="item
.id">{{ item
.name }}</div>
</
van-list>
</
van-popup>
</template>
<script setup>
import { ref } from '
vue';
const showPopup = ref(false);
const loading = ref(false);
const finished = ref(false);
const
listData = ref([]);
const onLoad = async () => {
if (loading
.value || finished
.value) return;
loading
.value = true;
try {
// 模拟异步请求
const newData = await fetchData();
listData
.value
.push(
...newData);
// 判断是否还有更多数据
if (newData
.length === 0) {
finished
.value = true;
}
} finally {
loading
.value = false;
}
};
const fetchData = () => {
return new Promise((resolve) => {
setTimeout(() => {
// 模拟获取数据
const newData = [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
];
resolve(newData);
}, 1000);
});
};
</script>
```
### 重置状态
在关闭 `
vant-popup`
时，重置 `loading` 和 `finished` 状态。
```
vue
<template>
<
van-popup v
-model="showPopup" @close="reset
ListState">
<
van-list
v
-model:loading="loading"
:finished="finished"
@load="onLoad"
>
<!
-- 列表内容
-->
<div v
-for="item in
listData" :key="item
.id">{{ item
.name }}</div>
</
van-list>
</
van-popup>
</template>
<script setup>
import { ref } from '
vue';
const showPopup = ref(false);
const loading = ref(false);
const finished = ref(false);
const
listData = ref([]);
const onLoad = async () => {
if (loading
.value || finished
.value) return;
loading
.value = true;
try {
// 模拟异步请求
const newData = await fetchData();
listData
.value
.push(
...newData);
// 判断是否还有更多数据
if (newData
.length === 0) {
finished
.value = true;
}
} finally {
loading
.value = false;
}
};
const reset
ListState = () => {
loading
.value = false;
finished
.value = false;
listData
.value = [];
};
const fetchData = () => {
return new Promise((resolve) => {
setTimeout(() => {
// 模拟获取数据
const newData = [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
];
resolve(newData);
}, 1000);
});
};
</script>
```
### 检查滚动位置
在打开 `
vant-popup`
时，确保滚动位置重置，防止因滚动位置
问题触发 `load` 事件。
```
vue
<template>
<
van-popup v
-model="showPopup" @open="resetScrollPosition">
<
van-list
v
-model:loading="loading"
:finished="finished"
@load="onLoad"
>
<!
-- 列表内容
-->
<div v
-for="item in
listData" :key="item
.id">{{ item
.name }}</div>
</
van-list>
</
van-popup>
</template>
<script setup>
import { ref } from '
vue';
const showPopup = ref(false);
const loading = ref(false);
const finished = ref(false);
const
listData = ref([]);
const
listRef = ref(null);
const onLoad = async () => {
if (loading
.value || finished
.value) return;
loading
.value = true;
try {
// 模拟异步请求
const newData = await fetchData();
listData
.value
.push(
...newData);
// 判断是否还有更多数据
if (newData
.length === 0) {
finished
.value = true;
}
} finally {
loading
.value = false;
}
};
const resetScrollPosition = () => {
if (
listRef
.value) {
listRef
.value
.scrollTop = 0;
}
};
const fetchData = () => {
return new Promise((resolve) => {
setTimeout(() => {
// 模拟获取数据
const newData = [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
];
resolve(newData);
}, 1000);
});
};
</script>
```
扫一扫
2718
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
