微信小程序左侧导航栏示例 - 全部功能展示

<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>
<pre><code>&lt;!-- 左侧导航栏 --&gt;
&lt;view class='sidebar'&gt;
  &lt;ul&gt;
    &lt;li&gt;菜单项1&lt;/li&gt;
    &lt;li&gt;菜单项2&lt;/li&gt;
    &lt;li&gt;菜单项3&lt;/li&gt;
  &lt;/ul&gt;
&lt;/view&gt;
</code></pre>
  </view>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</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 {
  width: 200px;
  background-color: red;
  height: 100vh;
  padding-top: 100rpx;
}

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

.sidebar li {
  padding: 10rpx;
  color: white;
}
</style>