From aab8119ad66583d65d517e2eb8e574b8794180c9 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Sun, 16 Jan 2022 20:58:19 +0800
Subject: [PATCH] 无限列表滚动
---
src/components/mini/tagTime.vue | 270 ++++++++++++++++++++++++++++++------------------------
1 files changed, 150 insertions(+), 120 deletions(-)
diff --git a/src/components/mini/tagTime.vue b/src/components/mini/tagTime.vue
index 1aa0c90..9f5f55f 100644
--- a/src/components/mini/tagTime.vue
+++ b/src/components/mini/tagTime.vue
@@ -10,7 +10,7 @@
{{yearData.year}}年
</a-divider>
- <a-timeline-item v-for="monthData in yearData.monthList" color="green">
+ <a-timeline-item v-for="monthData in yearData.monthList" color="white">
<a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" />
<h3>{{monthData.month}}</h3>
<div v-for="article in monthData.list">
@@ -23,6 +23,138 @@
</template>
<script>
+ var tempList = [{
+ "year": "2022",
+ "monthList": [{
+ "month": "9月18日",
+ "list": [{
+ "name": "陈奕迅-Body Song 歌词1",
+ "remark": "随笔"
+ },
+ {
+ "name": "vue动态路由异步加载",
+
+ }
+ ]
+ },
+ {
+ "month": "9月08日",
+ "list": [{
+ "name": "陈奕迅-Body Song 歌词1",
+ "remark": "111"
+ }]
+ },
+ {
+ "month": "8月16日",
+ "list": [{
+ "name": "陈奕迅-Body Song 歌词1",
+ "remark": "111"
+ },
+ {
+ "name": "陈奕迅-Body Song 歌词1",
+
+ },
+ {
+ "name": "陈奕迅-Body Song 歌词2",
+ "remark": "22"
+ }
+ ]
+ },
+ {
+ "month": "4月09日",
+ "list": [{
+ "name": "陈奕迅-Body Song 歌词1",
+ "remark": "111"
+ }]
+ },
+ {
+ "month": "3月18日",
+ "list": [{
+ "name": "陈奕迅-Body Song 歌词1",
+ "remark": "111"
+ }]
+ },
+ ]
+ },
+ {
+ "year": "2021",
+ "monthList": [{
+ "month": "9月18日",
+ "list": [{
+ "name": "陈奕迅-Body Song 歌词1",
+ "remark": "随笔"
+ },
+ {
+ "name": "vue动态路由异步加载",
+
+ }
+ ]
+ },
+ {
+ "month": "9月12日",
+ "list": [{
+ "name": "陈奕迅-Body Song 歌词1",
+ "remark": "111"
+ }]
+ },
+ {
+ "month": "9月09日",
+ "list": [{
+ "name": "陈奕迅-Body Song 歌词1",
+ "remark": "111"
+ }]
+ },
+ {
+ "month": "9月08日",
+ "list": [{
+ "name": "陈奕迅-Body Song 歌词1",
+ "remark": "111"
+ }]
+ },
+
+ ]
+ },
+ {
+ "year": "2020",
+ "monthList": [{
+ "month": "9月18日",
+ "list": [{
+ "name": "陈奕迅-Body Song 歌词1",
+ "remark": "随笔"
+ },
+ {
+ "name": "vue动态路由异步加载",
+
+ }
+ ]
+ },
+ {
+ "month": "9月08日",
+ "list": [{
+ "name": "陈奕迅-Body Song 歌词1",
+ "remark": "111"
+ }]
+ },
+ {
+ "month": "8月16日",
+ "list": [{
+ "name": "陈奕迅-Body Song 歌词1",
+ "remark": "111"
+ },
+ {
+ "name": "陈奕迅-Body Song 歌词1",
+
+ },
+ {
+ "name": "陈奕迅-Body Song 歌词2",
+ "remark": "22"
+ }
+ ]
+ }
+ ]
+ }
+ ]
+
export default {
props: {
'type': Number,
@@ -30,126 +162,25 @@
mounted() {
console.log(this.$route.query)
},
-
- data() {
- var tempList = [{
- "year": "2022",
- "monthList": [{
- "month": "9月18日",
- "list": [{
- "name": "陈奕迅-Body Song 歌词1",
- "remark": "随笔"
- },
- {
- "name": "vue动态路由异步加载",
- }
- ]
- },
- {
- "month": "9月08日",
- "list": [{
- "name": "陈奕迅-Body Song 歌词1",
- "remark": "111"
- }]
- },
- {
- "month": "8月16日",
- "list": [{
- "name": "陈奕迅-Body Song 歌词1",
- "remark": "111"
- },
- {
- "name": "陈奕迅-Body Song 歌词1",
-
- },
- {
- "name": "陈奕迅-Body Song 歌词2",
- "remark": "22"
- }
- ]
- }
- ]
- },
- {
- "year": "2021",
- "monthList": [{
- "month": "9月18日",
- "list": [{
- "name": "陈奕迅-Body Song 歌词1",
- "remark": "随笔"
- },
- {
- "name": "vue动态路由异步加载",
-
- }
- ]
- },
- {
- "month": "9月08日",
- "list": [{
- "name": "陈奕迅-Body Song 歌词1",
- "remark": "111"
- }]
- },
- {
- "month": "8月16日",
- "list": [{
- "name": "陈奕迅-Body Song 歌词1",
- "remark": "111"
- },
- {
- "name": "陈奕迅-Body Song 歌词1",
-
- },
- {
- "name": "陈奕迅-Body Song 歌词2",
- "remark": "22"
- }
- ]
- }
- ]
- },
- {
- "year": "2020",
- "monthList": [{
- "month": "9月18日",
- "list": [{
- "name": "陈奕迅-Body Song 歌词1",
- "remark": "随笔"
- },
- {
- "name": "vue动态路由异步加载",
-
- }
- ]
- },
- {
- "month": "9月08日",
- "list": [{
- "name": "陈奕迅-Body Song 歌词1",
- "remark": "111"
- }]
- },
- {
- "month": "8月16日",
- "list": [{
- "name": "陈奕迅-Body Song 歌词1",
- "remark": "111"
- },
- {
- "name": "陈奕迅-Body Song 歌词1",
-
- },
- {
- "name": "陈奕迅-Body Song 歌词2",
- "remark": "22"
- }
- ]
- }
- ]
+ watch: {
+ '$route'(to, from) {
+ var type = this.$route.query.type;
+ var list = [];
+ if (type == 1) {
+ list = tempList;
+ } else if (type == 2) {
+ list.push(tempList[0]);
+ } else if (type == 3) {
+ list.push(tempList[1]);
}
- ]
+
+ this.list = list
+ }
+ },
+
+ data() {
+
var list = [];
var type = this.$route.query.type;
@@ -157,7 +188,6 @@
list = tempList;
} else if (type == 2) {
list.push(tempList[0]);
- list.push(tempList[1]);
} else if (type == 3) {
list.push(tempList[1]);
}
--
Gitblit v1.9.1