This commit is contained in:
@@ -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}
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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;
|
||||
margin-bottom: 80px;
|
||||
background: #fafafa;
|
||||
/* 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);
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
} */
|
||||
Reference in New Issue
Block a user