uniapp侧边栏紧贴顶部导航栏底部并填充高度

如果你希望侧边栏（.sidebar）紧贴顶部导航栏（.af-head）的底部，并且高度填充整个界面高度，你可以通过一些样式调整来实现。以下是修改后的代码：

<template>
  <view>
    <!-- 顶部导航栏 -->
    <view class='af-head'>
      <span class='af-head-msg' style='font-size: 60rpx;'>&lt;</span>
      <span class='af-head-msg af-head-fuc'>全部功能</span>
    </view>

    <!-- 左侧导航栏 -->
    <view class='sidebar'>
      <ul>
        <li @click='navigateToPage('Page1')'>菜单项1</li>
        <li @click='navigateToPage('Page2')'>菜单项2</li>
        <li @click='navigateToPage('Page3')'>菜单项3</li>
      </ul>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    navigateToPage(page) {
      // 根据菜单项点击事件进行页面跳转或其他操作
      console.log('点击了' + page);
    }
  }
};
</script>

<style>
.af-head {
  position: relative;
  background-color: #629ffc;
  height: 100rpx;
  display: flex;
  justify-content: center;
  font-size: 44rpx;
  font-weight: 500;
  font-family: sans-serif;
}

.af-head-msg {
  position: absolute;
  bottom: 16rpx;
  color: white;
  left: 38rpx;
}

.af-head-fuc {
  text-align: center;
  left: 300rpx;
}

.sidebar {
  position: absolute;
  top: 100rpx; /* 与顶部导航栏底部对齐 */
  left: 0;
  width: 100px;
  background-color: white;
  bottom: 0; /* 填充整个界面高度 */
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  padding: 10rpx;
  color: black;
  /* 去掉点 */
  list-style-type: none;
  display: block;
  margin-top: 10px;
}
</style>

在上述代码中，我对 .sidebar 进行了样式调整。通过设置 position: absolute;，top: 100rpx; 和 bottom: 0;，将侧边栏定位到顶部导航栏底部，并且填充整个界面的高度。

请根据你的实际需求和样式要求，进行必要的调整。

希望这次修改满足了你的要求！