|
|
@@ -23,6 +23,8 @@ export default {
|
|
|
//组合开单
|
|
|
scroll_into_view:"",
|
|
|
top_list:'',
|
|
|
+ cached_top_list: null,
|
|
|
+ scrollTimer: null,
|
|
|
timeFun:"",
|
|
|
filterProductInfo:''
|
|
|
};
|
|
|
@@ -539,6 +541,18 @@ export default {
|
|
|
|
|
|
this.classIndex = 0;
|
|
|
this.scrollPushList();
|
|
|
+
|
|
|
+ // 异步获取并缓存分类节点高度，避免滚动时高频查询
|
|
|
+ this.$nextTick(() => {
|
|
|
+ setTimeout(() => {
|
|
|
+ const query = uni.createSelectorQuery().in(this);
|
|
|
+ query.selectAll(".selectAll").boundingClientRect(data => {
|
|
|
+ if (data && data.length > 0) {
|
|
|
+ this.cached_top_list = data.map(item => Math.ceil(item.top));
|
|
|
+ }
|
|
|
+ }).exec();
|
|
|
+ }, 600);
|
|
|
+ });
|
|
|
} catch (error) {
|
|
|
console.log(error)
|
|
|
} finally {
|
|
|
@@ -559,12 +573,55 @@ export default {
|
|
|
this.filterProductInfo = classList
|
|
|
return
|
|
|
},
|
|
|
- //滚动商品监听
|
|
|
+ //滚动商品监听（加入防抖与节流，使用缓存高度，避免高频跨线程查询）
|
|
|
scroll_detail(options){
|
|
|
- //options 为滚动信息。 options.detail.scrollTop 值为相对于scroll-view。
|
|
|
- if(!uni.getStorageSync("resolve")){
|
|
|
- this.get_node_details(options);
|
|
|
- };
|
|
|
+ if(uni.getStorageSync("resolve")){
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.scrollTimer) return;
|
|
|
+ this.scrollTimer = setTimeout(() => {
|
|
|
+ this.scrollTimer = null;
|
|
|
+
|
|
|
+ // 如果有缓存的高度列表，直接使用缓存进行快速区间判定
|
|
|
+ if (this.cached_top_list && this.cached_top_list.length > 0) {
|
|
|
+ this.async_detail_msg_fast(options.detail.scrollTop);
|
|
|
+ } else {
|
|
|
+ // 降级容灾：若未获取到缓存，则使用原有的动态查询
|
|
|
+ this.get_node_details(options);
|
|
|
+ }
|
|
|
+ }, 120);
|
|
|
+ },
|
|
|
+ // 快速区间判定（无 SelectorQuery 查询，极速响应）
|
|
|
+ async_detail_msg_fast(scrollTop) {
|
|
|
+ let top_page = scrollTop + this.cached_top_list[0];
|
|
|
+ for(let i = 0; i < this.cached_top_list.length; i++){
|
|
|
+ let node1 = this.cached_top_list[i];
|
|
|
+ let node2 = this.cached_top_list[i+1];
|
|
|
+ if(node2 && top_page >= node1 && top_page < node2){
|
|
|
+ this.updateActiveClasses(i);
|
|
|
+ break;
|
|
|
+ }else if(node2 && top_page === node2){
|
|
|
+ this.updateActiveClasses(i + 1);
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 动态 DOM 回收与激活核心逻辑
|
|
|
+ updateActiveClasses(activeIndex) {
|
|
|
+ this.classIndex = activeIndex;
|
|
|
+
|
|
|
+ // 动态 DOM 回收：只保留当前分类、上一个分类和下两个分类处于激活状态，其余全部释放
|
|
|
+ if (this.filterProductInfo && this.filterProductInfo.length > 0) {
|
|
|
+ this.filterProductInfo.forEach((item, idx) => {
|
|
|
+ if (idx >= activeIndex - 1 && idx <= activeIndex + 2) {
|
|
|
+ item.isActive = true;
|
|
|
+ } else {
|
|
|
+ item.isActive = false; // 滚出可视区域的分类，销毁其内部所有花材组件，释放内存
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.$forceUpdate();
|
|
|
+ }
|
|
|
},
|
|
|
//获取商品节点信息
|
|
|
get_node_details(options){
|
|
|
@@ -585,20 +642,10 @@ export default {
|
|
|
let node1 = this.top_list[i];
|
|
|
let node2 = this.top_list[i+1];
|
|
|
if(node2 && top_page >= node1 && top_page < node2){
|
|
|
- this.classIndex = i;
|
|
|
- this.filterProductInfo[this.classIndex].isActive = true;
|
|
|
- this.filterProductInfo[this.classIndex+1].isActive = true;
|
|
|
- if(this.filterProductInfo[this.classIndex+1].child.length<5){
|
|
|
- this.filterProductInfo[this.classIndex+2].isActive = true;
|
|
|
- }
|
|
|
+ this.updateActiveClasses(i);
|
|
|
break;
|
|
|
}else if(node2 && top_page === node2){
|
|
|
- this.classIndex = i + 1;
|
|
|
- this.filterProductInfo[this.classIndex].isActive = true;
|
|
|
- this.filterProductInfo[this.classIndex+1].isActive = true;
|
|
|
- if(this.filterProductInfo[this.classIndex+1].child.length<5){
|
|
|
- this.filterProductInfo[this.classIndex+2].isActive = true;
|
|
|
- }
|
|
|
+ this.updateActiveClasses(i + 1);
|
|
|
break;
|
|
|
}
|
|
|
}
|
