抽屉滚动事件不触发修复

app/src/pages/cok/CookieTable.vue

@@ -378,53 +378,101 @@ const openSeriesDownSetModal = () => {
   openCommonDrawer();
 };
 
-// ========== 公用抽屉打开逻辑 ==========
+// ========== 公用抽屉打开逻辑（替换原来的） ==========
 const openCommonDrawer = () => {
   // 重置抽屉状态
   drawerDataList.value = [];
   drawerPagination.current = 1;
   drawerPagination.total = 0;
   drawerPagination.hasMore = true;
-  // 显示抽屉
   showDrawer.value = true;
-  // 加载第一页数据
-  loadDrawerData();
-  // 监听滚动触底（延迟绑定，确保DOM已渲染）
-  nextTick(() => {
-    bindDrawerScrollEvent();
-  });
-};
 
+  // 确保DOM渲染后再加载 + 绑定事件
+  nextTick()
+    .then(() => {
+      loadDrawerData();
+      bindDrawerScrollEvent();
+    })
+    .catch(() => {});
+};
 // ========== 绑定抽屉滚动触底事件 ==========
+// const bindDrawerScrollEvent = () => {
+//   const scrollContainer = drawerScrollRef.value;
+//   if (!scrollContainer) return;
+
+//   // 先移除原有事件，避免重复绑定
+//   scrollContainer.removeEventListener('scroll', handleDrawerScroll);
+//   // 添加滚动事件
+//   scrollContainer.addEventListener('scroll', handleDrawerScroll);
+// };
+// ========== 绑定抽屉滚动触底事件（替换原来的） ==========
 const bindDrawerScrollEvent = () => {
   const scrollContainer = drawerScrollRef.value;
-  if (!scrollContainer) return;
+  if (!scrollContainer) {
+    // 延迟重试绑定，确保DOM渲染完成
+    setTimeout(() => {
+      bindDrawerScrollEvent();
+    }, 100);
+    return;
+  }
 
-  // 先移除原有事件，避免重复绑定
+  // 先清除所有旧事件
   scrollContainer.removeEventListener('scroll', handleDrawerScroll);
-  // 添加滚动事件
+  // 重新绑定
   scrollContainer.addEventListener('scroll', handleDrawerScroll);
+
+  // 额外：首次加载如果内容不足一屏，自动加载下一页
+  setTimeout(() => {
+    handleDrawerScroll();
+  }, 200);
 };
-
 // ========== 滚动触底处理逻辑 ==========
-const handleDrawerScroll = () => {
+// const handleDrawerScroll = () => {
-  const scrollContainer = drawerScrollRef.value;
+//   const scrollContainer = drawerScrollRef.value;
-  if (!scrollContainer || drawerPagination.loading || !drawerPagination.hasMore) return;
+//   if (!scrollContainer || drawerPagination.loading || !drawerPagination.hasMore) return;
 
-  // 计算滚动位置（触底阈值20px，避免精准触底才触发）
+//   // 计算滚动位置（触底阈值20px，避免精准触底才触发）
-  const { scrollTop, clientHeight, scrollHeight } = scrollContainer;
+//   const { scrollTop, clientHeight, scrollHeight } = scrollContainer;
-  const isBottom = scrollTop + clientHeight >= scrollHeight - 20;
+//   const isBottom = scrollTop + clientHeight >= scrollHeight - 20;
+
+//   if (isBottom) {
+//     // 加载下一页
+//     drawerPagination.current += 1;
+//     loadDrawerData();
+//   }
+// };
+
+// 防抖函数（防止滚动触发太频繁）
+const debounce = (func: Function, delay = 100) => {
+  let timeoutId: any;
+  return (...args: any[]) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => func.apply(this, args), delay);
+  };
+};
+// ========== 滚动触底处理逻辑（替换原来的） ==========
+const handleDrawerScroll = debounce(() => {
+  const scrollContainer = drawerScrollRef.value;
+  if (!scrollContainer) return;
+  if (drawerPagination.loading || !drawerPagination.hasMore) return;
+
+  const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
+  // 兼容所有设备的触底判断（距离底部 50px 就触发）
+  const isBottom = scrollTop + clientHeight + 50 >= scrollHeight;
 
   if (isBottom) {
-    // 加载下一页
+    console.log('✅ 触底加载触发');
     drawerPagination.current += 1;
     loadDrawerData();
   }
-};
+}, 100); // 100ms 防抖
 
-// ========== 加载抽屉数据（
+// ========== 加载抽屉数据（替换原来的） ==========
 const loadDrawerData = () => {
-  if (drawerPagination.loading || !drawerPagination.hasMore) return;
+  if (drawerPagination.loading || !drawerPagination.hasMore) {
+    console.log('🚫 阻止重复加载');
+    return;
+  }
 
   drawerPagination.loading = true;
   useApiStore()
@@ -436,17 +484,24 @@ const loadDrawerData = () => {
     })
     .then((res) => {
       if (res.code === 0) {
-        drawerDataList.value = [...drawerDataList.value, ...res.data.data];
+        const newData = res.data.data || [];
-        drawerPagination.loading = false;
+        drawerDataList.value = [...drawerDataList.value, ...newData];
-        // 更新分页状态
+
-        drawerPagination.total = res.data.total;
+        drawerPagination.total = res.data.total || 0;
-        drawerPagination.loading = false;
+        // 判断是否还有更多
-        // 判断是否还有更多数据
         drawerPagination.hasMore = drawerDataList.value.length < drawerPagination.total;
+
+        // 加载完成后立刻检查是否需要继续加载（适配大屏）
+        setTimeout(() => {
+          handleDrawerScroll();
+        }, 100);
       } else {
-        message.error(res.message);
+        message.error(res.message || '加载失败');
       }
     })
+    .catch(() => {
+      message.error('网络异常，加载失败');
+    })
     .finally(() => {
       drawerPagination.loading = false;
     });
@@ -1117,13 +1172,17 @@ html.dark-mode .drawer-card-container.grid-container .drawer-card-grid .ant-inpu
 // 抽屉滚动容器样式（核心修复）
 .drawer-scroll-container {
   width: 100%;
-  height: calc(100vh - 120px); // 关键：固定高度，确保能滚动
+  /* 固定抽屉内部高度，强制出现滚动区域 */
-  overflow-y: auto; // 开启垂直滚动
+  height: calc(100vh - 130px) !important;
-  overflow-x: hidden; // 隐藏水平滚动
+  min-height: 300px !important;
+  overflow-y: auto !important;
+  overflow-x: hidden !important;
   padding: 0 8px;
   box-sizing: border-box;
+  position: relative;
+  z-index: 1;
 
-  // 滚动条样式优化（可选）
+  /* 优化滚动条 */
   &::-webkit-scrollbar {
     width: 6px;
   }
@@ -1131,13 +1190,11 @@ html.dark-mode .drawer-card-container.grid-container .drawer-card-grid .ant-inpu
     background: transparent;
   }
   &::-webkit-scrollbar-thumb {
-    background: rgba(0, 0, 0, 0.1);
+    background: rgba(0, 0, 0, 0.15);
     border-radius: 3px;
   }
-
-  // 黑暗模式滚动条
   html.dark-mode &::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.1);
+    background: rgba(255, 255, 255, 0.2);
   }
 }