uniapp中制作侧边导航栏

制作一个简单的侧边导航栏，并且不使用额外的组件库，可以使用uni-app提供的基础组件和样式来实现。以下是一个使用uni-app基础组件和样式制作的简单侧边导航栏示例：

<template>
  <view class="sidebar-container">
    <view class="sidebar">
      <view class="sidebar-header">
        Logo
      </view>
      <view class="sidebar-menu">
        <view class="sidebar-item" v-for="(item, index) in sidebarItems" :key="index" @click="handleSidebarItemClick(item)">
          {{ item.title }}
        </view>
      </view>
    </view>
    <view class="main-content">
      <!-- 主要内容区域 -->
      <!-- 这里放主要内容 -->
    </view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      sidebarItems: [
        { title: '菜单项1' },
        { title: '菜单项2' },
        { title: '菜单项3' },
        { title: '菜单项4' }
      ]
    };
  },
  methods: {
    handleSidebarItemClick(item) {
      // 处理侧边栏菜单项点击事件
      console.log('点击了菜单项:', item);
    }
  }
};
</script>
 
<style>
.sidebar-container {
  display: flex;
}
 
.sidebar {
  background-color: #f0f0f0;
  width: 200px;
}
 
.sidebar-header {
  padding: 20px;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
}
 
.sidebar-menu {
  margin-top: 20px;
}
 
.sidebar-item {
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.3s;
}
 
.sidebar-item:hover {
  background-color: #e0e0e0;
}
 
.main-content {
  flex: 1;
  padding: 20px;
}
</style>

在这个示例中，我们使用了uni-app提供的基础组件和样式来制作侧边导航栏。`.sidebar-container`是一个Flex容器，其中包含了`.sidebar`和`.main-content`两个子元素。

`.sidebar`是侧边导航栏的容器，具有固定的宽度和背景色。`.sidebar-header`是导航栏的标题部分，`.sidebar-menu`是菜单项的容器。

菜单项使用`v-for`指令动态渲染，通过点击菜单项触发`handleSidebarItemClick`方法处理点击事件。

`.sidebar-item`定义了菜单项的样式，设置了鼠标悬浮时的背景色变化效果。

`.main-content`是主要内容区域，具有flex-grow属性，使其自动填充剩余空间