用uniapp

### 实现顶部定位菜单栏并高亮当前菜单的解决方案 在 UniApp 中实现顶部定位菜单栏，并在向下滑动时高亮显示当前功能菜单，可以通过监听滚动事件来动态计算当前可视区域内的内容，从而更新菜单的高亮状态。以下是一个完整的解决方案和代码示例[^3]。 #### 1. 页面结构设计 页面分为两部分：顶部菜单栏和内容区域。每个内容区域对应一个菜单项，通过监听滚动事件判断当前可视区域的内容，进而更新菜单栏的高亮状态。 ```html <template> <view class="container"> <!-- 顶部菜单栏 --> <view class="menu-bar" :style="{ position: 'fixed', top: '0', width: '100%' }"> <view v-for="(item, index) in menuItems" :key="index" class="menu-item" :class="{ active: currentIndex === index }" @click="scrollToSection(index)" > {{ item }} </view> </view> <!-- 内容区域 --> <scroll-view class="content" scroll-y="true" @scroll="handleScroll" :scroll-into-view="scrollIntoViewId" > <view v-for="(item, index) in menuItems" :key="index" :id="'section-' + index" class="section" > {{ item }} - 内容区域 </view> </scroll-view> </view> </template> ``` #### 2. 样式定义 为菜单栏和内容区域定义样式，确保菜单栏固定在顶部，内容区域可以滚动。 ```css <style> .container { display: flex; flex-direction: column; height: 100vh; } .menu-bar { display: flex; background-color: #f5f5f5; z-index: 10; } .menu-item { padding: 10px 20px; cursor: pointer; } .menu-item.active { color: red; font-weight: bold; } .content { margin-top: 50px; /* 确保内容区域不被菜单栏遮挡 */ height: calc(100vh - 50px); } .section { height: 100vh; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #ccc; } </style> ``` #### 3. 脚本逻辑 通过 `@scroll` 监听滚动事件，计算当前可视区域对应的内容块，并更新菜单栏的高亮状态。 ```javascript <script> export default { data() { return { menuItems: ['菜单1', '菜单2', '菜单3', '菜单4'], // 菜单项 currentIndex: 0, // 当前高亮菜单索引 scrollIntoViewId: '' // 滚动到指定位置的 ID }; }, methods: { scrollToSection(index) { this.currentIndex = index; // 更新高亮状态 this.scrollIntoViewId = 'section-' + index; // 滚动到对应内容区域 setTimeout(() => { this.scrollIntoViewId = ''; }, 100); // 清空 ID 防止多次触发 }, handleScroll(e) { const scrollTop = e.detail.scrollTop; const sectionHeights = this.menuItems.map((_, i) => { const section = uni.createSelectorQuery().select('#section-' + i); return section.boundingClientRect().exec()[0].top + scrollTop; }); // 找到第一个大于等于当前 scrollTop 的索引 this.currentIndex = sectionHeights.findIndex(height => height >= scrollTop); } } }; </script> ``` #### 4. 关键点解析 - **滚动监听**：通过 `@scroll` 事件获取当前滚动位置，并结合内容区域的高度计算当前可视区域。 - **高亮更新**：根据滚动位置动态更新菜单栏中高亮的菜单项。 - **平滑滚动**：使用 `scroll-into-view` 属性实现点击菜单时平滑滚动到对应内容区域[^3]。 --- ###