主页添加内容标签页

pages/index/index.vue

@@ -88,7 +88,51 @@
 				</sortble>
 			</z-paging-cell>
 			<z-paging-cell>
-				<w-waterfall :data="list">
+				<view class="tab-nav">
+					<view 
+						v-for="(tab, index) in tabs" 
+						:key="index"
+						:class="['tab-item', currentTab === index ? 'active' : '']"
+						@click="switchTab(index)"
+					>
+						{{ tab }}
+					</view>
+				</view>
+
+				<view v-if="currentTab === 2" class="hot-topics">
+					<view class="hot-topics-header">
+						<text class="hot-topics-title">热搜资讯！</text>
+					</view>
+					<swiper 
+						class="hot-topics-swiper" 
+						:current="currentTopicPage"
+						@change="handleTopicPageChange"
+					>
+						<swiper-item v-for="(page, pageIndex) in topicPages" :key="pageIndex">
+							<view class="hot-topics-list">
+								<view v-for="(topic, index) in page" :key="index" class="topic-item">
+									<text class="topic-index">{{ pageIndex * 5 + index + 1 }}</text>
+									<view class="topic-content">
+										<view class="topic-title-row">
+											<text class="topic-title">{{ topic.title }}</text>
+											<text v-if="topic.isHot" class="hot-tag">HOT</text>
+										</view>
+										<text class="topic-participants">{{ topic.participants }}人正在热议</text>
+									</view>
+								</view>
+							</view>
+						</swiper-item>
+					</swiper>
+					<view class="indicator-dots">
+						<view 
+							v-for="i in 2" 
+							:key="i" 
+							:class="['dot', currentTopicPage === i-1 ? 'active' : '']"
+						></view>
+					</view>
+				</view>
+
+				<w-waterfall :data="currentList">
 					<template v-slot:content="{item,width}">
 						<card :item="item" :width="width" :custom-style="{background:'#fff'}" textColor="#000"></card>
 					</template>
@@ -170,6 +214,41 @@
 				}, ],
 				list: [], // 瀑布流全部数据
 				dataList: [],
+				tabs: ['关注', '推荐', '探索'],
+				currentTab: 1,
+				currentTopicPage: 0,
+				followList: [], // 关注列表数据
+				recommendList: [], // 推荐列表数据
+				exploreList: [], // 探索列表数据
+				hotTopics: [
+					{ title: '今日热门话题一', participants: 275, isHot: true },
+					{ title: '人气话题二', participants: 183, isHot: false },
+					{ title: '热门讨论三', participants: 156, isHot: true },
+					{ title: '今日话题四', participants: 142, isHot: false },
+					{ title: '热门话题五', participants: 138, isHot: true },
+					{ title: '今日热点六', participants: 127, isHot: false },
+					{ title: '热门讨论七', participants: 119, isHot: true },
+					{ title: '人气话题八', participants: 108, isHot: false },
+					{ title: '今日话题九', participants: 96, isHot: true },
+					{ title: '热门话题十', participants: 89, isHot: false },
+				],
+			}
+		},
+		computed: {
+			currentList() {
+				switch(this.currentTab) {
+					case 0: return this.followList;
+					case 1: return this.list; // 使用原有的list作为推荐列表
+					case 2: return this.exploreList;
+					default: return [];
+				}
+			},
+			topicPages() {
+				const pages = [];
+				for (let i = 0; i < this.hotTopics.length; i += 5) {
+					pages.push(this.hotTopics.slice(i, i + 5));
+				}
+				return pages;
 			}
 		},
 		onLoad() {
@@ -294,7 +373,34 @@
 						});
 					}, 200)
 				})
-			}
+			},
+			switchTab(index) {
+				this.currentTab = index;
+				// 根据需要加载对应标签的数据
+				this.loadTabData(index);
+			},
+			loadTabData(index) {
+				// 这里添加加载不同标签数据的逻辑
+				switch(index) {
+					case 0:
+						if (!this.followList.length) {
+							this.getData().then(res => {
+								this.followList = res.data;
+							});
+						}
+						break;
+					case 2:
+						if (!this.exploreList.length) {
+							this.getData().then(res => {
+								this.exploreList = res.data;
+							});
+						}
+						break;
+				}
+			},
+			handleTopicPageChange(e) {
+				this.currentTopicPage = e.detail.current;
+			},
 		}
 	}
 </script>
@@ -327,4 +433,105 @@
 			}
 		}
 	}
+
+	.tab-nav {
+		display: flex;
+		justify-content: center;
+		padding: 20rpx 0;
+		background: #161616;
+		
+		.tab-item {
+			padding: 0 30rpx;
+			color: #808080;
+			font-size: 28rpx;
+			
+			&.active {
+				color: #ffffff;
+				font-weight: bold;
+			}
+		}
+	}
+
+	.hot-topics {
+		padding: 20rpx;
+		background: #28292D;
+		margin: 20rpx;
+		border-radius: 16rpx;
+		
+		.hot-topics-header {
+			margin-bottom: 20rpx;
+			
+			.hot-topics-title {
+				font-size: 32rpx;
+				font-weight: bold;
+				color: #ffffff;
+			}
+		}
+		
+		.hot-topics-swiper {
+			height: 400rpx; // Adjust this value based on your content
+		}
+		
+		.hot-topics-list {
+			padding: 10rpx 0;
+		}
+		
+		.topic-item {
+			display: flex;
+			align-items: center;
+			padding: 15rpx 0;
+			
+			.topic-index {
+				width: 40rpx;
+				color: #808080;
+			}
+			
+			.topic-content {
+				flex: 1;
+				
+				.topic-title-row {
+					display: flex;
+					align-items: center;
+					
+					.topic-title {
+						color: #ffffff;
+						font-size: 28rpx;
+					}
+					
+					.hot-tag {
+						margin-left: 10rpx;
+						padding: 4rpx 10rpx;
+						background: #FF4B4B;
+						color: #ffffff;
+						font-size: 20rpx;
+						border-radius: 8rpx;
+					}
+				}
+				
+				.topic-participants {
+					font-size: 24rpx;
+					color: #808080;
+					margin-top: 6rpx;
+				}
+			}
+		}
+		
+		.indicator-dots {
+			display: flex;
+			justify-content: center;
+			margin-top: 20rpx;
+			
+			.dot {
+				width: 12rpx;
+				height: 12rpx;
+				border-radius: 50%;
+				background: #808080;
+				margin: 0 6rpx;
+				
+				&.active {
+					background: #ffffff;
+				}
+			}
+		}
+	}
 </style>