uniapp伸缩侧边栏

UniApp是一款基于Vue.js的跨平台开发框架，它允许开发者使用一套代码构建一次，运行在多个平台上，如微信小程序、H5、iOS、Android等。关于UniApp的伸缩侧边栏（Slidable Sidebar或Off-canvas menu），这是一种常见的交互设计模式，常用于移动应用中，特别是在需要显示或隐藏内容区域的时候，比如导航菜单。

在UniApp中，你可以通过内置的`u-nav`组件或者自定义组件结合CSS样式来实现侧边栏的伸缩功能。以下是一些基本步骤：

1. **使用内置组件**：`u-nav`组件本身就支持侧边栏效果，只需设置`mode`属性为`sidebar`，并配置需要展开和折叠的子菜单。

<template>
  <u-nav mode="sidebar">
    <u-menu>
      <u-menu-item v-for="item in menus" :key="item.name">{{ item.name }}</u-menu-item>
    </u-menu>
  </u-nav>
</template>

<script>
export default {
  data() {
    return {
      menus: [
        // ...
      ]
    }
  }
}
</script>

2. **自定义组件**：如果你想要更高级的定制，可以创建一个自定义的滑动侧边栏组件，并使用`v-show`或`v-if`控制其显示/隐藏。

<template>
  <div class="sidebar" v-show="isOpen">
    <!-- 侧边栏内容 -->
  </div>
  <button @click="toggleSidebar">Toggle Sidebar</button>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false,
    };
  },
  methods: {
    toggleSidebar() {
      this.isOpen = !this.isOpen;
    },
  },
};
</script>
<style scoped>
.sidebar {
  /* 样式配置 */
}
</style>