fix(merch detail): fix header style and optimize list toggle

1. 修正商品详情页头部容器的样式选择器和优先级问题
2. 调整商品数据监听,改为监听商品描述而非整个merch对象
3. 给列表切换逻辑添加防抖处理,避免频繁切换触发过多渲染
4. 新增列表切换的防抖工具函数
This commit is contained in:
2026-05-29 14:42:38 +08:00
parent 1edda80d21
commit 3781e54a32

View File

@@ -322,20 +322,20 @@ export default {
return { return {
headerHeight: 320, headerHeight: 320,
screenWidth: uni.getSystemInfoSync().windowWidth, screenWidth: uni.getSystemInfoSync().windowWidth,
headerHeightInited: false headerHeightInited: false,
changeStyleDebounce: null
}; };
}, },
mixins: [list], mixins: [list],
watch: { watch: {
merch: { 'merch.desc': {
handler() { handler() {
if (!this.headerHeightInited) { if (!this.headerHeightInited) {
this.$nextTick(() => { this.$nextTick(() => {
this.initHeaderHeight(); this.initHeaderHeight();
}); });
} }
}, }
deep: true
} }
}, },
methods: { methods: {
@@ -358,6 +358,13 @@ export default {
} }
}).exec(); }).exec();
}, 100); }, 100);
},
changeListStyle() {
if (this.changeStyleDebounce) clearTimeout(this.changeStyleDebounce);
this.changeStyleDebounce = setTimeout(() => {
this.isList = !this.isList;
this.waterfallflow(0);
}, 50);
} }
}, },
mounted() { mounted() {
@@ -370,8 +377,8 @@ export default {
@import './public/css/list.scss'; @import './public/css/list.scss';
</style> </style>
<style scoped> <style scoped>
.head-wrap { view.head-wrap {
top: 0; top: -1 !important;
} }
.merch-image-wrap { .merch-image-wrap {