当前位置：首页 > news >正文

uniapp开发Web页面之动态菜单配置攻略

news 2024/10/25 21:53:01

在uniapp开发过程中，为Web页面配置动态菜单是一个常见的需求。本文将详细介绍如何在uniapp项目中实现动态菜单的配置，帮助开发者轻松应对此类场景。

一、准备工作

确保已安装uniapp开发环境，包括HBuilderX、Node.js等。
创建一个uniapp项目，本文以Vue3版本为例。

二、设计菜单数据结构

在配置动态菜单之前，我们需要设计一个合适的菜单数据结构。以下是一个简单的菜单数据结构示例：

const menuData = [{title: "首页",icon: "home",path: "/home"},{title: "资讯",icon: "info",path: "/news",children: [{title: "国内新闻",icon: "news",path: "/news/domestic"},{title: "国际新闻",icon: "news",path: "/news/international"}]},{title: "个人中心",icon: "user",path: "/user"}
];

三、创建菜单组件

1、在components目录下创建一个名为Menu.vue的组件。

<template><div class="menu"><ul><li v-for="(item, index) in menuData" :key="index"><a :href="item.path"><i :class="'iconfont icon-' + item.icon"></i><span>{{ item.title }}</span></a><ul v-if="item.children"><li v-for="(child, childIndex) in item.children" :key="childIndex"><a :href="child.path"><i :class="'iconfont icon-' + child.icon"></i><span>{{ child.title }}</span></a></li></ul></li></ul></div>
</template><script>
export default {name: "Menu",props: {menuData: {type: Array,default: () => []}}
};
</script><style scoped>
.menu ul {list-style: none;padding: 0;margin: 0;
}.menu li {position: relative;
}.menu a {display: block;padding: 10px;color: #333;text-decoration: none;
}.menu a:hover {background-color: #f5f5f5;
}.menu .iconfont {margin-right: 10px;
}.menu ul ul {display: none;position: absolute;left: 100%;top: 0;
}.menu li:hover > ul {display: block;
}
</style>

2、在页面中引入并使用Menu组件。

<template><div><menu-component :menuData="menuData"></menu-component></div>
</template><script>
import MenuComponent from "@/components/Menu.vue";export default {components: {MenuComponent},data() {return {menuData: [// 菜单数据]};}
};
</script>

四、动态获取菜单数据

在实际项目中，菜单数据通常来自后端接口。以下是一个示例，演示如何从后端获取菜单数据：

1、在页面组件中，添加如下代码：

export default {// ...created() {this.fetchMenuData();},methods: {async fetchMenuData() {const res = await this.$http.get("/api/menu");if (res.data.code === 0) {this.menuData = res.data.data;}}}
};

2、在main.js中全局注册$http，以便在页面组件中使用：

import { createApp } from 'vue';
import App from './App.vue';
import './uni.scss';const app = createApp(App);// 全局注册$http
app.config.globalProperties.$http = uni.request;app.mount('#app');