1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
| <template>
| <div class="flex flex-col w-full h-full">
| <order-nav class="w-full" :back="false" :title="$t('未读消息')" @back="hiddenUnread" />
| <div class="w-full flex-1 overflow-auto">
| <van-list v-model="loading" :finished="finished" :finished-text="$t('已经全部加载完毕')" @load="onLoad">
| <items v-for="(item, index) in list" :key="index" :items="item" />
| </van-list>
| </div>
| </div>
| </template>
|
| <script>
| import {
| List,
| } from "vant";
| import OrderNav from "@/components/order-nav/OrderNav";
| import Items from "@/page/orderList/items";
|
| export default {
| name: "Unread",
| props: ['data'],
| data() {
| return {
| list: [],
| loading: false,
| finished: false,
| }
| },
| methods: {
| hiddenUnread() {
| this.$emit('back')
| },
| onLoad() {
| // 异步更新数据
| // setTimeout 仅做示例，真实场景中一般为 ajax 请求
| setTimeout(() => {
| for (let i = 0; i < this.data.length; i++) {
| this.list.push(this.data[i]);
| }
|
| // 加载状态结束
| this.loading = false;
|
| // 数据全部加载完成
| if (this.list.length >= 10) {
| this.finished = true;
| }
| }, 1000);
| },
| },
| components: {
| [List.name]: List,
| OrderNav,
| Items,
| }
| }
| </script>
|
| <style scoped></style>
|
|
