diff --git a/miniprogram/components/filter-bar/index.js b/miniprogram/components/filter-bar/index.js index 1136897..e7110b9 100644 --- a/miniprogram/components/filter-bar/index.js +++ b/miniprogram/components/filter-bar/index.js @@ -13,9 +13,8 @@ Component({ data: { panelOpen: false, panelItems: [], // 选中置顶后的全量列表(供面板渲染) - visibleTags: [], // 多选模式下内联展示的已选标签(上限若干) - moreCount: 0, // 多选模式下内联未展示完的已选数量 - summary: '' // 单模式下内联展示的当前选中文案 + visibleItems: [], // 内联收起态展示的「几个」选中项(单选最多 1,多选最多 3) + moreCount: 0 // 多选超出展示上限的剩余数量(内联 +N) }, observers: { @@ -26,46 +25,34 @@ Component({ methods: { recompute(items) { - // 选中置顶:active 的排前面,其余保持原序 + // 选中置顶:active 的排前面,其余保持原序(面板展开后选中即在最前) const list = items.slice().sort((a, b) => (b.active ? 1 : 0) - (a.active ? 1 : 0)); - if (this.data.multiple) { - const sel = list.filter((i) => i.active); - const MAX = 4; - this.setData({ - panelItems: list, - visibleTags: sel.slice(0, MAX), - moreCount: Math.max(0, sel.length - MAX), - summary: '' - }); - } else { - const active = list.find((i) => i.active); - this.setData({ - panelItems: list, - summary: active ? active.label : (this.data.placeholder || '全部'), - visibleTags: [] - }); - } + const sel = list.filter((i) => i.active); + const MAX = 3; // 收起态最多展示几个选中项 + this.setData({ + panelItems: list, + visibleItems: sel.slice(0, MAX), + moreCount: Math.max(0, sel.length - MAX) + }); }, togglePanel() { this.setData({ panelOpen: !this.data.panelOpen }); }, - // 内联一行 chips:单选直接选中并回传;多选切换 active 并回传全量 values - onChipTap(e) { + // 内联收起态:只展示「几个」选中 chip + 末尾的「全部类型」按钮,不做横滑铺全部 + // 单选:点已选 chip 打开面板切换;多选:点已选 chip 直接移除 + onChipTapInline(e) { const value = e.currentTarget.dataset.value; if (this.data.multiple) { const next = this.data.items.map((i) => - i.value === value ? { ...i, active: !i.active } : i + i.value === value ? { ...i, active: false } : i ); this.recompute(next); const vals = next.filter((i) => i.active).map((i) => i.value); this.triggerEvent('change', { values: vals }); } else { - const cur = this.data.items.find((i) => i.value === value); - if (cur && cur.active) return; // 已是当前选中,避免重复触发 - this.recompute(this.data.items.map((i) => ({ ...i, active: i.value === value }))); - this.triggerEvent('change', { value }); + this.togglePanel(); } }, closePanel() { diff --git a/miniprogram/components/filter-bar/index.wxml b/miniprogram/components/filter-bar/index.wxml index d46e2bb..51aa2fd 100644 --- a/miniprogram/components/filter-bar/index.wxml +++ b/miniprogram/components/filter-bar/index.wxml @@ -1,17 +1,19 @@ - - + + {{item.label}} + catchtap="onChipTapInline">{{item.label}} + +{{moreCount}} - 全部类型 + {{visibleItems.length ? '全部类型' : (placeholder || '全部类型')}} - + diff --git a/miniprogram/components/filter-bar/index.wxss b/miniprogram/components/filter-bar/index.wxss index bd33548..9f2c227 100644 --- a/miniprogram/components/filter-bar/index.wxss +++ b/miniprogram/components/filter-bar/index.wxss @@ -1,8 +1,11 @@ .fb { width: 100%; background: var(--surface); } -/* —— 内联一行可横滑的分类 chips —— */ +/* —— 内联收起态:几个选中 chip + 全部类型按钮,单行不横滑 —— */ .fb-row { - white-space: nowrap; + display: flex; + align-items: center; + flex-wrap: nowrap; + overflow: hidden; padding: 4rpx 4rpx 8rpx; background: var(--surface); } diff --git a/miniprogram/components/navbar/index.wxss b/miniprogram/components/navbar/index.wxss index 52f246c..186d892 100644 --- a/miniprogram/components/navbar/index.wxss +++ b/miniprogram/components/navbar/index.wxss @@ -1,5 +1,5 @@ .navbar { - background: linear-gradient(180deg, var(--bar-bg) 0%, var(--float-bg) 100%); + background: linear-gradient(180deg, #0B0F0E 0%, #0E1412 100%); position: sticky; top: 0; z-index: 50;