uniapp怎么做到侧边栏一直都在？

Question

就比如左侧这个菜单栏，要求不管什么页面都在。

如同web端的管理平台一样，不管右侧页面怎么变化，左侧的菜单一直都在

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

uni-app 侧边栏一直都在的解决方案

uni-app 提供了多种方式来实现侧边栏一直都在，下面是一些常见的解决方案：

1. 使用 uni-page-body 组件

可以在 app.vue 文件中使用 uni-page-body 组件，设置其宽度为固定值，例如：

<template>
  <uni-page-body>
    <!-- 侧边栏内容 -->
    <view class="sidebar">
      <!-- 侧边栏内容 -->
    </view>
    <!-- 主要内容 -->
    <view class="content">
      <!-- 主要内容 -->
    </view>
  </uni-page-body>
</template>

1. 使用 uni-scroll-view 组件

可以在 app.vue 文件中使用 uni-scroll-view 组件，设置其宽度为固定值，例如：

<template>
  <uni-scroll-view
    :scroll-x="false"
    :scroll-y="true"
    :scroll-top="0"
    :scroll-left="0"
    :scroll-with-animation="true"
  >
    <!-- 侧边栏内容 -->
    <view class="sidebar">
      <!-- 侧边栏内容 -->
    </view>
    <!-- 主要内容 -->
    <view class="content">
      <!-- 主要内容 -->
    </view>
  </uni-scroll-view>
</template>

1. 使用 CSS 定位

可以使用 CSS 定位来实现侧边栏一直都在，例如：

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100vh;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

这些解决方案都可以实现侧边栏一直都在，但是需要根据具体的需求和设计来选择合适的解决方案。