<template> <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> <!-- <van-cell v-for="item in courses" :key="item" :title="item.title" /> --> <van-card v-for="item in courses" :key="item" num="2" price="2.00" :desc="item.body" :title="item.id + '-' + item.title" thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg" /> </van-list> </van-pull-refresh> </template> <script> export default { name: "LoadMore", data() { return { list: [], courses: [], loading: false, finished: false, refreshing: false }; }, methods: { onLoad() { setTimeout(() => { if (this.refreshing) { this.courses = []; this.refreshing = false; } for (let i = 0; i < 10; i++) { this.courses.push(this.list[this.courses.length]); } this.loading = false; if (this.courses.length >= 40) { this.finished = true; } }, 3000); }, onRefresh() { // 清空列表数据 this.finished = false; // 重新加载数据 // 将 loading 设置为 true,表示处于加载状态 this.loading = true; this.onLoad(); } }, created() { let url = "http://jsonplaceholder.typicode.com/posts" this.axios.get(url).then((res) => { this.list = res.data }) } }; </script> <style scoped></style>为什么加载中这三个字只显示一次
时间: 2023-12-26 12:04:04 浏览: 111
根据你提供的代码,我猜测是因为在加载更多数据时,只是简单地将 `loading` 属性设置为 `true`,而没有在界面上显示加载中的提示。所以建议在 `onLoad()` 方法中添加一个显示加载中提示的逻辑。
例如,在 `van-list` 组件上添加 `slot="loading"` 并在插槽内放置一个加载中提示组件,如下所示:
```html
<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
<!-- <van-cell v-for="item in courses" :key="item" :title="item.title" /> -->
<van-card v-for="item in courses" :key="item" num="2" price="2.00" :desc="item.body"
:title="item.id + '-' + item.title" thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg" />
<template slot="loading">
<van-loading class="load-more-loading" />
<span class="load-more-text">加载中...</span>
</template>
</van-list>
```
在 `style` 中添加样式来控制加载中提示的位置和样式:
```css
.load-more-loading {
margin-right: 6px;
}
.load-more-text {
font-size: 14px;
color: #999;
}
```
这样就能在加载更多数据时正确显示加载中的提示了。
阅读全文