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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
| <template>
| <div class="article-page">
| <nav class="my-nav van-hairline--bottom">
| <a
| :class="{active:sorter}"
| href="javascript:;"
| @click="changeSorter('weight_desc')"
| >推荐</a>
| <a
| :class="{active:!sorter}"
| href="javascript:;"
| @click="changeSorter(null)"
| >最新</a>
| <div class="logo"><img
| src="@/assets/logo.png"
| alt=""
| ></div>
| </nav>
|
| <van-list
| v-model="loading"
| :finished="finished"
| finished-text="我是有底线的！"
| @load="onLoad"
| >
| <ArticleItem
|
| v-for="item in list"
| :key="item.id"
| :item=item
| ></ArticleItem>
| </van-list>
|
| </div>
| </template>
|
| <script>
| import { getArticles } from '@/api/article'
|
| export default {
| name: 'article-page',
|
| data () {
| return {
| list: [],
| current: 1,
| sorter: 'weight_desc',
| loading: false,
| finished: false
| }
| },
| created () {
|
| },
| methods: {
| // 刚进入页面 因为 list:[] 所以会触发一次onLoad
| // 每次触底是 也会调用一次onLoad
| async onLoad () {
| const { data } = await getArticles({
| current: this.current,
| sorter: this.sorter
| })
| // console.log(data)
| // 要将获取的数据追加到数组中，不然一直都是10条数据。也就是一直在触底 一直在发请求！！！
| this.list.push(...data.rows)
|
| console.log(this.list)
| this.loading = false
|
| // 每次获取的页数加1
| this.current++
|
| // 页数大于后端的数据 也就是没有了
| if (this.current > data.pageTotal) {
| this.finished = true
| }
| },
|
| changeSorter (value) {
| this.sorter = value
|
| // 重置所有条件
| this.current = 1
| this.list = []
| this.finished = false
|
| // 手动加载更过
| this.loading = true
| this.onLoad()
| }
|
| }
| }
| </script>
|
| <style lang="less" scoped>
| .article-page {
| margin-bottom: 50px;
| margin-top: 44px;
| .my-nav {
| height: 44px;
| position: fixed;
| left: 0;
| top: 0;
| width: 100%;
| z-index: 999;
| background: #fff;
| display: flex;
| align-items: center;
| > a {
| color: #999;
| font-size: 14px;
| line-height: 44px;
| margin-left: 20px;
| position: relative;
| transition: all 0.3s;
| &::after {
| content: "";
| position: absolute;
| left: 50%;
| transform: translateX(-50%);
| bottom: 0;
| width: 0;
| height: 2px;
| background: #222;
| transition: all 0.3s;
| }
| &.active {
| color: orange;
| &::after {
| width: 14px;
| }
| }
| }
| .logo {
| flex: 1;
| display: flex;
| justify-content: flex-end;
| > img {
| width: 64px;
| height: 28px;
| display: block;
| margin-right: 10px;
| }
| }
| }
| }
| </style>
|
|
