uniapp中制作侧边导航栏

最新推荐文章于 2025-05-27 10:44:15 发布

她说她一如既往的爱我

最新推荐文章于 2025-05-27 10:44:15 发布

阅读量843

点赞数 10

CC 4.0 BY-SA版权

文章标签： uni-app

本文链接：https://blog.youkuaiyun.com/weixin_62980497/article/details/139631796

制作一个简单的侧边导航栏，并且不使用额外的组件库，可以使用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'