UniApp 侧边导航栏实现：简单易用的示例教程

<template>
  <view>
    <uni-sidebar class='sidebar' :show.sync='showSidebar'>
      <!-- 侧边导航栏的内容 -->
      <view class='sidebar-content'>
        <ul>
          <li>菜单项1</li>
          <li>菜单项2</li>
          <li>菜单项3</li>
        </ul>
      </view>
    </uni-sidebar>
<pre><code>&lt;!-- 主要内容 --&gt;
&lt;view class='main-content'&gt;
  &lt;view class='header'&gt;
    &lt;!-- 菜单按钮 --&gt;
    &lt;view class='menu-icon' @click='toggleSidebar'&gt;
      &lt;image src='/static/icon/menu.svg' /&gt;
    &lt;/view&gt;
  &lt;/view&gt;
  
  &lt;!-- 主要内容区域 --&gt;
  &lt;view class='main-content-body'&gt;
    &lt;!-- 此处放置你的页面内容 --&gt;
  &lt;/view&gt;
&lt;/view&gt;
</code></pre>
  </view>
</template>
<script>
export default {
  data() {
    return {
      showSidebar: false // 控制侧边导航栏的显示与隐藏
    };
  },
  methods: {
    toggleSidebar() {
      // 切换侧边导航栏的显示与隐藏
      this.showSidebar = !this.showSidebar;
    }
  }
};
</script>
<style>
.sidebar {
  width: 200px;
  background-color: #f4f4f4;
}

.sidebar-content {
  padding: 20px;
}

.sidebar li {
  margin-bottom: 10px;
  cursor: pointer;
}

.main-content {
  position: relative;
}

.header {
  height: 60px;
  background-color: #333;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.menu-icon {
  width: 30px;
  height: 30px;
  cursor: pointer;
  color: #fff;
}

.main-content-body {
  padding: 20px;
  background-color: #fff;
}
</style>
<p>使用 <code>&lt;uni-sidebar&gt;</code> 组件制作侧边导航栏，您可以使用 <code>showSidebar</code> 变量控制其显示与隐藏。点击菜单按钮时，<code>toggleSidebar</code> 方法会切换 <code>showSidebar</code> 的值。</p>
<p>侧边导航栏内容放在 <code>&lt;uni-sidebar&gt;</code> 组件内部的 <code>.sidebar-content</code> 中，您可以根据需要自定义导航栏样式和内容。</p>
<p>主要内容区域放在 <code>.main-content</code> 中，这里使用了一个顶部的 <code>.header</code>，您可以放置自己的菜单按钮图标，并根据需要调整样式。</p>
<p>主要内容区域的内容放在 <code>.main-content-body</code> 中，这是一个示例，您可以放置自己的页面内容。</p>
<p>您可以根据需求和样式要求修改代码和样式以适应您的项目。</p>