整体滚动

app/index/view/mobile/product/classify.html

@@ -44,6 +44,7 @@
         {volist name="categorys" id="category"}
         <li class="nav-item {eq name='$key' value='0'}active{/eq}" data-tab="tab{$category.id}">{$category.name}</li>
         {/volist}
+        <li style="background: #fff;" class="li-bottom"></li>
     </ul>
 
     <!-- 右侧分区内容 -->
@@ -62,7 +63,7 @@
                 {if condition="!empty($child.products)"}
                 <div class="scroll-box">
                     {volist name="$child.products" id="pro"}
-                    <a class="card" href="{:url('product/detail', ['id' => $pro.id])}" style="background: #fafafa;">
+                    <a class="card" href="{:url('product/detail', ['id' => $pro.id])}" style="background: #fff;">
                         <div class="card-img">
                             <img src="{$pro.cover_image}" alt="">
                         </div>
@@ -156,9 +157,7 @@ document.querySelectorAll('.sidebar li').forEach(item => {
         // 更新相邻圆角
         updateSidebarAdjacentRadius();
         
-        // 您的tab切换逻辑
-        // const tabId = this.getAttribute('data-tab');
-        // 切换内容...
+  
     });
 });
 
@@ -166,5 +165,61 @@ document.querySelectorAll('.sidebar li').forEach(item => {
 if (document.querySelector('.sidebar li.active')) {
     updateSidebarAdjacentRadius();
 }
+
+
+// 动态计算 li-bottom 的高度
+function setLiBottomHeight() {
+    const sidebar = document.querySelector('.sidebar');
+    const liBottom = document.querySelector('.sidebar .li-bottom');
+    const sidebarItems = document.querySelectorAll('.sidebar li:not(.li-bottom)');
+    
+    if (!sidebar || !liBottom || sidebarItems.length === 0) return;
+    
+    // 计算所有正常li的总高度
+    let totalHeight = 0;
+    sidebarItems.forEach(item => {
+        totalHeight += item.offsetHeight;
+    });
+    
+    // 获取sidebar的高度
+    const sidebarHeight = sidebar.offsetHeight;
+    
+    // 计算剩余高度
+    const remainingHeight = sidebarHeight - totalHeight;
+    
+    // 赋值给 li-bottom
+    if (remainingHeight > 0) {
+        liBottom.style.height = remainingHeight + 'px';
+    } else {
+        liBottom.style.height = '0px';
+        liBottom.style.display = 'none';
+    }
+}
+
+// 页面加载时执行
+window.addEventListener('load', function() {
+    setLiBottomHeight();
+});
+
+// 窗口大小改变时重新计算
+window.addEventListener('resize', function() {
+    console.log('切换了吗')
+    setLiBottomHeight();
+});
+
+// 如果侧边栏内容有动态变化，使用 MutationObserver 监听
+const observer = new MutationObserver(function() {
+    setLiBottomHeight();
+});
+
+// 监听侧边栏变化
+const sidebar = document.querySelector('.sidebar');
+if (sidebar) {
+    observer.observe(sidebar, { 
+        childList: true, 
+        subtree: true, 
+        attributes: true 
+    });
+}
 </script>
 {/block}