liujiaxin 1 месяц назад
Родитель
Сommit
c112f40bfb
2 измененных файлов с 33 добавлено и 9 удалено
  1. 31 6
      pages/home/components/GoodsNav.vue
  2. 2 3
      pages/home/newindex.vue

+ 31 - 6
pages/home/components/GoodsNav.vue

@@ -1,6 +1,10 @@
 <template>
 	<view class="goods-nav" v-if="navList && navList.length > 0">
-		<scroll-view scroll-x class="nav-scroll" :show-scrollbar="false">
+		<view class="nav-row">
+			<view class="nav-all" :class="{ active: activeId === 'all' || activeId === 0 || activeId === '0' }" @tap.stop="onSelectAll" @click.stop="onSelectAll">
+				<text>全部</text>
+			</view>
+			<scroll-view scroll-x class="nav-scroll" :show-scrollbar="false">
 			<view class="nav-inner">
 				<view
 					v-for="(item, index) in navList"
@@ -12,7 +16,8 @@
 					<text>{{ item.name || item.categoryName || item.label }}</text>
 				</view>
 			</view>
-		</scroll-view>
+			</scroll-view>
+		</view>
 	</view>
 </template>
 
@@ -24,6 +29,9 @@ export default {
 		activeId: { type: [String, Number], default: null }
 	},
 	methods: {
+		onSelectAll() {
+			this.$emit('select', { id: 'all', name: '全部', categoryName: '全部' });
+		},
 		onSelectByIndex(index) {
 			const list = this.navList;
 			if (!list || index < 0 || index >= list.length) {
@@ -39,15 +47,32 @@ export default {
 
 <style lang="scss" scoped>
 .goods-nav {
-	// background: #fff;
-	// border-bottom: 1rpx solid #eee;
+	width: 100%;
+}
+.nav-row {
+	display: flex;
+	align-items: center;
+	padding: 0 24rpx;
+	gap: 30rpx;
+}
+.nav-all {
+	flex-shrink: 0;
+	font-family: PingFangSC, PingFang SC;
+	font-weight: 400;
+	font-size: 40rpx;
+	color: rgba(0,0,0,0.85);
+	line-height: 56rpx;
+}
+.nav-all.active {
+	color: #FF233C;
+	font-weight: 600;
 }
 .nav-scroll {
-	width: 100%;
+	flex: 1;
 }
 .nav-inner {
 	display: inline-flex;
-	padding:0 24rpx;
+	padding:0;
 	gap: 30rpx;
 }
 .nav-item {

+ 2 - 3
pages/home/newindex.vue

@@ -137,15 +137,14 @@ export default {
 				return ''
 			}
 		},
-		// 瀑布流标签:全部 + 后端 categoryTags
+		// 瀑布流标签:后端 categoryTags(不包含“全部”)
 		goodsNavList() {
-			const all = [{ id: 'all', name: '全部', categoryName: '全部' }]
 			const tags = (this.goodsNav || []).map(t => ({
 				id: t.id || t.cateId,
 				name: t.categoryName || t.cateName || t.name,
 				categoryName: t.categoryName || t.cateName || t.name
 			}))
-			return all.concat(tags)
+			return tags
 		}
 	},
 	onLoad(option) {