uniapp 左侧导航栏实现示例 - 添加菜单项

<template>
  <view>
    <!-- 顶部导航栏 -->
    <view class='af-head'>
      <span class='af-head-msg' style='font-size: 60rpx;'>&lt;</span>
      <span class='af-head-msg af-head-fuc'>全部功能</span>
    </view>
<pre><code>&lt;!-- 左侧导航栏 --&gt;
&lt;view class='sidebar'&gt;
  &lt;ul&gt;
    &lt;li @click='navigateToPage('Page1')'&gt;菜单项1&lt;/li&gt;
    &lt;li @click='navigateToPage('Page2')'&gt;菜单项2&lt;/li&gt;
    &lt;li @click='navigateToPage('Page3')'&gt;菜单项3&lt;/li&gt;
  &lt;/ul&gt;
&lt;/view&gt;
</code></pre>
  </view>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    navigateToPage(page) {
      // 根据菜单项点击事件进行页面跳转或其他操作
      console.log('点击了' + page);
    }
  }
};
</script>
<style>
.af-head {
  position: relative;
  background-color: #629ffc;
  height: 100rpx;
  display: flex;
  justify-content: center;
  font-size: 44rpx;
  font-weight: 500;
  font-family: sans-serif;
}

.af-head-msg {
  position: absolute;
  bottom: 16rpx;
  color: white;
  left: 38rpx;
}

.af-head-fuc {
  text-align: center;
  left: 300rpx;
}

.sidebar {
  width: 200px;
  background-color: red;
  height: 100vh;
  padding-top: 100rpx;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  padding: 10rpx;
  color: white;
}
</style>
<p>在上述代码中，我在左侧导航栏的 <code>&lt;ul&gt;</code> 中添加了三个菜单项 <code>&lt;li&gt;</code>，并利用 <code>@click</code> 事件绑定了 <code>navigateToPage</code> 方法。在 <code>navigateToPage</code> 方法中，你可以根据需要进行页面跳转或执行其他操作。</p>
<p>请根据你的实际需求和样式要求，进行必要的调整。</p>
<p>希望这次修改满足了你的要求！</p>