baiyuApp/pages_mall/components/GoodsNav.vue

<template>
	<view class="goods-nav" v-if="navList && navList.length > 0">
		<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"
					:key="item.id || item.value || index"
					:class="['nav-item', { active: (item.id || item.value) === activeId }]"
					@tap.stop="onSelectByIndex(index)"
					@click.stop="onSelectByIndex(index)"
				>
					<text>{{ item.name || item.categoryName || item.label }}</text>
				</view>
			</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'GoodsNav',
	props: {
		navList: { type: Array, 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) {
				console.warn('[GoodsNav] onSelectByIndex 无效 index:', index, 'list.length:', list ? list.length : 0);
				return;
			}
			const item = list[index];
			this.$emit('select', item);
		}
	}
};
</script>

<style lang="scss" scoped>
.goods-nav {
	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 {
	flex: 1;
}
.nav-inner {
	display: inline-flex;
	padding:0;
	gap: 30rpx;
}
.nav-item {
	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-item.active {
	color: #FF233C;
	font-weight: 600;
}
.nav-item.active text {
	// border-bottom: 2rpx solid #E5212B;
	// padding-bottom: 4rpx;
}
</style>