fix(merch detail): fix header style and optimize list toggle
1. 修正商品详情页头部容器的样式选择器和优先级问题 2. 调整商品数据监听,改为监听商品描述而非整个merch对象 3. 给列表切换逻辑添加防抖处理,避免频繁切换触发过多渲染 4. 新增列表切换的防抖工具函数
This commit is contained in:
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user