uniProject/components/MtaNavbar/MtaNavbar.vue

<template>
	<!-- left-icon="left" left-text="返回" @clickLeft="handleBack" shadow status-bar -->
	<uni-nav-bar dark :fixed="true" shadow background-color="transparent" title="自定义导航栏" class="dljt-navBar-box">
		<view class="dljt-logo-box"></view>
		<icon class="dljt-menu-box" v-if="hasRight" @click="handleChangeMenu"></icon>
	</uni-nav-bar>

	<!-- 菜单面板 -->
<!--  <scroll-view scroll-y :scroll-top="scrollTop">-->
	<uni-collapse class="head-collapse-box" ref="collapse" accordion v-model="data.activeMenu" v-show="data.showMenu">
		<uni-collapse-item class="head-collapse-item" :title="item.title" v-for="item in data.list" :key="item.title"
			:name="item.url">
			<view class="head-item-text" v-for="cIt in item.children" :key="item.title"
				:class="{active: cIt.url.includes(data.activePath)}" @click="handleClick(cIt)">
				{{cIt.title}}
			</view>
		</uni-collapse-item>
	</uni-collapse>
<!--  </scroll-view>-->
</template>

<script setup>
	import {
		ref,
		reactive,
    onMounted,
    nextTick
  } from "vue"
	const showLeft = ref(null)
	import {
		onLoad
	} from "@dcloudio/uni-app"

	const props = defineProps({
		hasRight: {
			type: Boolean,
			default: true
		}
	})

	const ani = ref(null)

	const data = reactive({
		list: [{
				title: '学校主页',
				url: '/pages/index/index',
				children: [{
					title: '首页',
					url: '/pages/index/index',
				}]
			},
			{
				title: '学院概况',
				url: '/pages/xygkXueyuanjianjie/xygkXueyuanjianjie',
				children: [{
						title: '学院简介',
						url: '/pages/xygkXueyuanjianjie/xygkXueyuanjianjie'
					}, {
						title: '机构设置',
						url: '/pages/xygkJigoushezhi/xygkJigoushezhi',
					}, {
						title: '学院荣誉',
						url: '/pages/xygkXueyuanrongyu/xygkXueyuanrongyu'
					}, {
						title: '学院文化',
						url: '/pages/xygkXueyuanwenhua/xygkXueyuanwenhua'
					}, {
						title: '校园风光',
						url: '/pages/xygkXiaoyuanfengguang/xygkXiaoyuanfengguang'
					}, {
						title: '联系方式',
						url: '/pages/xygkLianxifangshi/xygkLianxifangshi'
					},

				]
			},
			{
				title: '党群工作',
				url: '/pages/dqgzDangzuzhijiagou/dqgzDangzuzhijiagou',
				children: [{
					title: '党组织架构',
					url: '/pages/dqgzDangzuzhijiagou/dqgzDangzuzhijiagou'
				}, {
					title: '工会组织架构',
					url: '/pages/dqgzGonghuizuzhijiagou/dqgzGonghuizuzhijiagou'
				}, {
					title: '党建工作',
					url: '/pages/dqgzDangjiangongzuo/dqgzDangjiangongzuo'
				}, {
					title: '党员风采',
					url: '/pages/dqgzDangyuanfengcai/dqgzDangyuanfengcai'
				}, {
					title: '工会之家',
					url: '/pages/dqgzGonghuizhijia/dqgzGonghuizhijia'
				}]
			},
			{
				title: '校园动态',
				url: '3',
				children: [{
					title: '学院新闻',
					url: '/pages/xydtXueyuanxingwen/xydtXueyuanxingwen'
				}, {
					title: '通知公告',
					url: '/pages/xydtTongzhigonggao/xydtTongzhigonggao'
				}, {
					title: '校务公开',
					url: '/pages/xydtXiaowugongkai/xydtXiaowugongkai'
				}, {
					title: '学院风采',
					url: '/pages/xydtXueyuanfengcai/xydtXueyuanfengcai'
				}]
			},
			{
				title: '教育教学',
				url: '/pages/jyjxZhuanyejianshe/jyjxZhuanyejianshe',
				children: [{
						title: '专业建设',
						url: '/pages/jyjxZhuanyejianshe/jyjxZhuanyejianshe'
					}, {
						title: '师资队伍',
						url: '/pages/jyjxShiziduiwu/jyjxShiziduiwu'
					}, {
						title: '教研活动',
						url: '/pages/jyjxKeyanhuodong/jyjxKeyanhuodong'
					}, {
						title: '科研动态',
						url: '/pages/jyjxKeyandongtai/jyjxKeyandongtai'
					}, {
						title: '技能鉴定',
						url: '/pages/jyjxJinengjianding/jyjxJinengjianding'
					}, {
						title: '第二课堂',
						url: '/pages/jyjxDierketang/jyjxDierketang'
					}, {
						title: '大赛风采',
						url: '/pages/jyjxDasaifengcai/jyjxDasaifengcai'
					}, {
						title: '重点项目',
						url: '/pages/jyjxZhongdianxiangmu/jyjxZhongdianxiangmu'
					},
					{
						title: '校企合作',
						url: '/pages/jyjxXiaoqihezuo/jyjxXiaoqihezuo'
					},
					{
						title: '规章制度',
						url: '/pages/jyjxGuizhangzhidu/jyjxGuizhangzhidu'
					},
				]
			}, {
				title: '学生园地',
				url: '/pages/xsydDeyuduiwu/xsydDeyuduiwu',
				children: [{
					title: '德育队伍',
					url: '/pages/xsydDeyuduiwu/xsydDeyuduiwu'
				}, {
					title: '学生活动',
					url: '/pages/xsydXueshenghuodong/xsydXueshenghuodong'
				}, {
					title: '共青团',
					url: '/pages/xsydGongqingtuan/xsydGongqingtuan'
				}, {
					title: '资助管理',
					url: '/pages/xsydZizhuguanli/xsydZizhuguanli'
				}]
			},
			{
				title: '招生就业',
				url: "pages/zsjyZhaoshengjianzhang/zsjyZhaoshengjianzhang",
				children: [{
					title: '招生简章',
					url: "/pages/zsjyZhaoshengjianzhang/zsjyZhaoshengjianzhang",
				}, {
					title: '专业介绍',
					url: '/pages/zsjyZhuanyejieshao/zsjyZhuanyejieshao'
				}, {
					title: '升学',
					url: '/pages/zsjyShengxue/zsjyShengxue'
				}, {
					title: '报考指南',
					url: '/pages/zsjyBaokaozhinan/zsjyBaokaozhinan'
				}, {
					title: '往年录取分数',
					url: '/pages/zsjyWangnianluqufenshu/zsjyWangnianluqufenshu'
				}, {
					title: '校企合作',
					url: '/pages/zsjyXiaoqihezuo/zsjyXiaoqihezuo'
				}, {
					title: '招聘信息',
					url: '/pages/zsjyZhaopinxinxi/zsjyZhaopinxinxi'
				}, {
					title: '政策文件',
					url: '/pages/zsjyZhengcewenjian/zsjyZhengcewenjian'
				}, {
					title: '优秀毕业生',
					url: '/pages/zsjyYouxiubiyesheng/zsjyYouxiubiyesheng'
				}, {
					title: '预报名',
					url: '/pages/zsjyYubaoming/zsjyYubaoming'
				}]
			}, {
				title: '职业培训',
				url: '/pages/zypxTongzhigonggao/zypxTongzhigonggao',
				children: [{
					title: '线上教育',
					type: 'link',
					url: '/mdist/#/pages/index/index'
				}, {
					title: '课程查询',
					type: 'link',
					url: '/mdist/#/pages/index/index'
				}, {
					title: '通知公告',
					url: '/pages/zypxTongzhigonggao/zypxTongzhigonggao'
				}]
			}, {
				title: '下载中心',
				url: '/pages/xzzxXiazaizhongxin/xzzxXiazaizhongxin',
				children: [{
					title: '下载',
					url: '/pages/xzzxXiazaizhongxin/xzzxXiazaizhongxin',
				}]
			},

		],
		activeMenu: null,
		activePath: '',
		showMenu: false,
	})

	onLoad(() => {
		const pages = getCurrentPages();
		data.activePath = pages[pages.length - 1].route;
		const parentMenu = data.list.find(item => item.children.some(cit => cit.url.includes(data.activePath)));
		console.log('parentMenu && parentMenu.url', parentMenu && parentMenu.url)
		data.activeMenu = parentMenu && parentMenu.url;
	})

	function handleClick(data) {
		console.log(`菜单:${data.title};路径:${data.url}`);
		if (data.type == 'link') {
			window.location.href = data.url;
			return;
		}
		if (data.url) {
			uni.navigateTo({
				url: data.url
			})
		}
	}

	function handleChangeMenu() {
		data.showMenu = !data.showMenu;
    // data.showMenu && scrollToElement('.head-item-text.active')
	}

	function handleBack() {
		uni.navigateBack()
	}
  const scrollTop = ref(0);
  // 滚动到目标元素
  const scrollToElement = (selector) => {
    nextTick(() => {
      uni.createSelectorQuery().in(this)
          .select(selector).boundingClientRect(rect => {
        scrollTop.value = rect.top; // 设置滚动位置
      }).exec();
    })
  };
</script>

<style>
</style>