整体滚动

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}

app/index/view/mobile/public/header.html

@@ -15,7 +15,7 @@
         </div>
     </div>
 
-    <div class="nav-dropdown-menu">
+    <div class="nav-dropdown-menu" style="height: 100vh; overflow-y: scroll;-webkit-overflow-scrolling: touch;padding-bottom:4rem;">
         <!-- 产品列表 - 有子菜单 -->
         <div class="menu-item has-child">
             <div class="menu-item-box">
@@ -131,6 +131,7 @@
     </div>
 </header>
 <script>
+
     document.addEventListener('DOMContentLoaded', function ()
     {
         const navBtn = document.querySelector('.nav-img');
@@ -579,104 +580,6 @@
             }
         });
         
-        // ====================== 动态计算子菜单高度并添加滚动功能（产品列表除外） ======================
-        // 判断是否为产品列表（第一个菜单项）
-        function isProductList(menuItem) {
-            const firstMenuItem = document.querySelector('.menu-item');
-            return menuItem === firstMenuItem;
-        }
-        
-        // 设置子菜单的最大高度
-        function setSubMenuHeight(subMenu, menuItem) {
-            if (!subMenu || !menuItem) return;
-            
-            // 产品列表不处理
-            if (isProductList(menuItem)) {
-                subMenu.style.maxHeight = '';
-                subMenu.style.overflowY = '';
-                return;
-            }
-            
-            // 获取菜单位置信息
-            const rect = menuItem.getBoundingClientRect();
-            const bottomSpace = 50;   // 底部留白空间
-            
-            // 计算可用高度 = 视口高度 - 菜单顶部距离 - 底部留白
-            let availableHeight = window.innerHeight - rect.top - bottomSpace;
-            
-            // 限制最小高度
-            if (availableHeight < 200) {
-                availableHeight = 200;
-            }
-            
-            // 设置子菜单的最大高度和滚动
-            subMenu.style.maxHeight = availableHeight + 'px';
-            subMenu.style.overflowY = 'auto';
-            subMenu.style.overflowX = 'hidden';
-            subMenu.style.WebkitOverflowScrolling = 'touch';
-        }
-        
-        // 为所有有子菜单的导航项（产品列表除外）绑定事件
-        const allMenuItems = document.querySelectorAll('.has-child');
-        
-        allMenuItems.forEach(function(menuItem) {
-            const subMenu = menuItem.querySelector('.sub-menu');
-            const box = menuItem.querySelector('.menu-item-box');
-            
-            if (!subMenu || !box) return;
-            
-            // 产品列表不处理滚动功能
-            if (isProductList(menuItem)) {
-                return;
-            }
-            
-            // 添加点击事件处理高度
-            box.addEventListener('click', function(e) {
-                // 如果子菜单即将打开，计算高度
-                if (!subMenu.classList.contains('show')) {
-                    // 延迟一帧，确保DOM已更新
-                    setTimeout(function() {
-                        setSubMenuHeight(subMenu, menuItem);
-                        // 确保滚动位置在顶部
-                        subMenu.scrollTop = 0;
-                    }, 0);
-                }
-            });
-        });
-        
-        // 窗口大小改变时，重新计算已打开的子菜单高度
-        window.addEventListener('resize', function() {
-            const openSubMenus = document.querySelectorAll('.has-child .sub-menu.show');
-            openSubMenus.forEach(function(subMenu) {
-                const menuItem = subMenu.closest('.has-child');
-                if (menuItem && !isProductList(menuItem)) {
-                    setSubMenuHeight(subMenu, menuItem);
-                }
-            });
-        });
-        
-        // 监听菜单打开状态变化（使用 MutationObserver 确保高度正确设置）
-        const observer = new MutationObserver(function(mutations) {
-            mutations.forEach(function(mutation) {
-                if (mutation.attributeName === 'class') {
-                    const target = mutation.target;
-                    if (target.classList && target.classList.contains('sub-menu') && target.classList.contains('show')) {
-                        const menuItem = target.closest('.has-child');
-                        if (menuItem && !isProductList(menuItem)) {
-                            setSubMenuHeight(target, menuItem);
-                            // 确保滚动位置在顶部
-                            target.scrollTop = 0;
-                        }
-                    }
-                }
-            });
-        });
-        
-        // 观察所有子菜单的class变化
-        document.querySelectorAll('.has-child .sub-menu').forEach(function(subMenu) {
-            observer.observe(subMenu, { attributes: true });
-        });
-        
         // ====================== 购物车弹窗悬浮图功能 ======================
         // 处理购物车弹窗中的图片悬浮效果
         function initCartModalHover() {
@@ -756,3 +659,4 @@
         }
     });
 </script>
+

public/static/index/mobile/css/category.css

@@ -65,7 +65,7 @@ body {
 /* 左侧菜单  #FAFAFA;*/
 .sidebar {
     width: 114px;
-    background: #fff;
+    background:#fafafa;
     overflow-y: auto;
     box-sizing: border-box;
 }
@@ -77,7 +77,7 @@ body {
     font-size: 0.28rem !important;
     color:#686A70;   /* #686A70;*/
     cursor: pointer;
-    background:#FAFAFA;
+    background:#fff;
     /* 分别控制上下圆角的过渡 */
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
@@ -85,7 +85,7 @@ body {
 }
 .sidebar li.active {
     color: #004BFA;
-    background: #fff;
+    background: #fafafa;
 }
 
 
@@ -101,16 +101,39 @@ body {
     flex: 1;
     overflow-y: auto;
     padding-left: 12px;
-    background: #fff;
+    background: #fafafa;
-    margin-bottom: 80px;
+    /* padding-bottom: 100px; */
 
 }
 
+.right-content {
+    flex: 1;
+    overflow-y: auto;
+    padding-left: 12px;
+    background: #fafafa;
+    position: relative;
+}
+
+/* 在底部添加占位元素 */
+.right-content::after {
+    content: '';
+    display: block;
+    height: 80px; /* 根据需要调整 */
+    width: 100%;
+    flex-shrink: 0;
+}
+
+/* 最后一个元素底部留白 */
+.sec-box:last-child {
+    margin-bottom: 80px;
+}
+
+
+
 .sec-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-
     padding-top: 24px;
     padding-right: 17px;
     padding-bottom: 12px;
@@ -153,7 +176,7 @@ body {
 
 .right-card {
     flex-shrink: 0;
-    background: #FAFAFA;
+    background: #fff;
     border-radius: 8px;
     overflow: hidden;
     box-shadow: 0 1px 2px rgba(0, 0, 0, .05);

public/static/index/mobile/css/new_header.css

@@ -118,9 +118,9 @@
     .sub-menu {
         display: none;
         /* height: 100vh; */
-        overflow-y: auto;
+        /* overflow-y: auto;
         overflow-x: hidden;
-        -webkit-overflow-scrolling: touch;
+        -webkit-overflow-scrolling: touch; */
     }
     
     /* .sub-menu-overflow {
@@ -449,9 +449,9 @@
     overflow-y: visible !important;
 }
 
-/* 其他导航的子菜单使用JS动态设置高度 */
+/* 其他导航的子菜单使用JS动态设置高度
 .has-child:not(:first-child) .sub-menu {
     overflow-y: auto;
     overflow-x: hidden;
     -webkit-overflow-scrolling: touch;
-}
+} */