uniapp flex布局左侧导航栏和高亮代码

UniApp 的 Flex 布局结合左侧导航栏通常用于构建响应式、易于操作的界面。Flex 布局允许元素在容器内根据需要自动调整尺寸和位置，非常适用于移动端布局。

在 UniApp 中，你可以通过以下几个步骤创建一个带左侧导航栏并支持高亮显示的页面：

1. **设置 Flexbox**:
使用 `flex` 和 `align-items` 属性来设置页面的主内容区域采用 Flex 布局。例如，你可以给 `.container` 元素添加 `display: flex; align-items: center;`。

<view class="container" style="display: flex; align-items: center;">
  <!-- 主要内容区域 -->
</view>

2. **左侧导航栏**:
创建一个固定宽度的 `aside` 或 `swiper-item` 来作为左侧导航栏。通常你会有一个列表项，并为其设置一个点击事件，切换主内容区域的高亮效果。

<view class="nav">
  <navigator v-for="(item, index) in navItems" :key="index" @click="handleNavClick(index)">
    <!-- 导航按钮，每个对应一个页面或选项 -->
  </navigator>
</view>

3. **高亮代码**:
当用户点击导航栏按钮时，你需要更新主内容区域的样式，比如将激活的按钮背景色改变。可以存储一个状态变量来跟踪当前选中的索引，然后根据这个索引来动态修改样式。

data() {
  return {
    activeIndex: 0,
    navItems: [...], // 列表数据
  };
},
methods: {
  handleNavClick(index) {
    this.activeIndex = index;
    // 更新主内容区域的高亮样式，如:
    this.$refs.contentWrapper.style.backgroundColor = index === this.activeIndex ? 'your_highlight_color' : '';
  }
}

记得给主要内容区域添加一个 ref，如 `<view ref="contentWrapper"></view>`，以便在 JavaScript 中访问它。