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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
| <template>
| <div class="new_list">
| <!-- <tab-head :title="$t('hj6')"></tab-head> -->
|
| <news-item v-for="item in newsList" :key="item.id" :item="item"></news-item>
|
| <div class="more-news" @click="getMore" v-if="newsList.length > 0">
| <span v-if="lod == 1">{{ $t("加载更多") }}</span>
| <span v-else-if="lod == 2">{{ $t("加载中") }}</span>
| <span v-else-if="lod == 3">{{ $t("沒有更多了") }}</span>
| </div>
|
| <van-skeleton
| :row="10"
| v-if="newsList.length == 0"
| style="margin-top: 1em;"
| />
| </div>
| </template>
|
| <script>
| import tabHead from "@/components/tabHead.vue";
| import NewsItem from "./components/newsItem.vue";
| import * as api from "@/axios/api";
|
| export default {
| name: "newList",
| components: {
| tabHead,
| NewsItem
| },
| data() {
| return {
| pageNum: 1,
| pageSize: 10,
| total: 0,
| newsList: [],
| lod: 1 // 1 加载更多 2 加载中 3 沒有更多了
| };
| },
| created() {
| this.getNewsList();
| },
| methods: {
| // 获取新闻列表
| async getNewsList() {
| let options = {
| pageNum: this.pageNum,
| pageSize: this.pageSize,
| type: 1
| };
| let data = await api.getNewsList(options);
|
| this.newsList = [...this.newsList, ...data.data.list];
| this.total = data.data.total;
| this.lod = 1;
| if (this.total <= this.newsList.length) this.lod = 3;
| },
| // 加载更多
| getMore() {
| if (this.lod == 3) return;
| this.lod = 2;
| this.pageNum++;
| this.getNewsList();
| }
| }
| };
| </script>
|
| <style lang="less" scoped>
| .new_list {
| font-size: 10vw;
| width: 100%;
| min-height: 100vh;
| padding-bottom: 1.4rem;
|
| }
| </style>
|
|
