uniapp自定义左侧菜单栏

要在uniapp中自定义左侧菜单栏，可以使用uni-ui组件库中的slide-view组件。

首先在页面中引入slide-view组件，然后在页面中定义一个slide-view标签，将菜单栏的内容放在slide-view标签内部。在菜单栏的内容中，可以使用uni-ui提供的list组件或者自定义的组件。

然后在页面的右侧内容区域中，也可以使用slide-view组件，将页面的内容放在slide-view标签内部。需要注意的是，右侧内容区域的slide-view组件需要设置宽度为100%减去菜单栏的宽度。

最后，使用slide-view组件提供的事件监听函数，可以在菜单栏和右侧内容区域之间进行切换。

以下是一个简单的示例代码：

<template>
  <view>
    <slide-view class="menu" :width="menuWidth" :height="contentHeight" :disable-drag="false" :show-menu="showMenu" @menu-click="toggleMenu">
      <!-- 左侧菜单栏 -->
      <list>
        <cell>菜单项1</cell>
        <cell>菜单项2</cell>
        <cell>菜单项3</cell>
      </list>
    </slide-view>
    <slide-view class="content" :width="contentWidth" :height="contentHeight" :disable-drag="false" :show-menu="showMenu" @menu-click="toggleMenu">
      <!-- 右侧内容区域 -->
      <view>
        <text>这是右侧内容区域</text>
      </view>
    </slide-view>
  </view>
</template>

<script>
import { slideView, list, cell } from 'uni-ui'

export default {
  components: {
    slideView,
    list,
    cell
  },
  data() {
    return {
      showMenu: false,
      menuWidth: 200,
      contentWidth: 0,
      contentHeight: 0
    }
  },
  mounted() {
    // 获取右侧内容区域的宽度和高度
    const systemInfo = uni.getSystemInfoSync()
    const contentWidth = systemInfo.windowWidth - this.menuWidth
    const contentHeight = systemInfo.windowHeight
    this.contentWidth = contentWidth
    this.contentHeight = contentHeight
  },
  methods: {
    toggleMenu() {
      this.showMenu = !this.showMenu
    }
  }
}
</script>

<style scoped>
.menu {
  position: fixed;
  top: 0;
  left: 0;
}
.content {
  position: fixed;
  top: 0;
  left: 200px;
}
</style>