|
|
@@ -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 {
|