uni-app这个导航切换怎么做?

uni-app这个导航切换怎么做?就是让导航切换在个人中心的左边

img

img

img

应该不行 个人中心 是 配置 出来的 。你导航切换 是 代码块了 。 除非可以引入自定义 组件。

设置navigationStyle自定义头部导航栏

https://q.qq.com/wiki/develop/miniprogram/frame/dispose_page.html

在uni-app中,你可以使用以下方法实现导航切换:

在个人中心页面中加入一个抽屉组件,它的位置可以设置在左边;

监听抽屉组件的开关事件,当用户点击按钮时,打开抽屉;

在抽屉中加入导航栏,并给每一个导航项加入监听事件;

当用户点击导航项时,执行跳转逻辑,同时关闭抽屉;

以下是代码实现示例:

<template>
  <view>
    <!-- 导航按钮 -->
    <button @click="openDrawer">打开抽屉</button>

    <!-- 抽屉 -->
    <uni-drawer 
      :show="showDrawer" 
      @close="closeDrawer"
      mode="left"
    >
      <!-- 导航栏 -->
      <view class="nav-list">
        <view 
          class="nav-item" 
          @click="gotoPage1"
        >
          页面1
        </view>
        <view 
          class="nav-item" 
          @click="gotoPage2"
        >
          页面2
        </view>
      </view>
    </uni-drawer>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showDrawer: false
    };
  },
  methods: {
    // 打开抽屉
    openDrawer() {
      this.showDrawer = true;
    },
    // 关闭抽屉
    closeDrawer() {
      this.showDrawer = false;
    },
    // 跳转页面1
    gotoPage1() {
      this.$router.push({
        path: "/page1"
      });
      this.showDrawer = false;
    },
    // 跳转页面2
    gotoPage2() {
      this.$router.push({
        path: "/page2"
      });
      this.showDrawer = false;
    }