uni-app这个导航切换怎么做?就是让导航切换在个人中心的左边
应该不行 个人中心 是 配置 出来的 。你导航切换 是 代码块了 。 除非可以引入自定义 组件。
设置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;
}