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

uniapp 模仿 Android的Menu菜单栏

news 来源：原创 2024/5/10 0:26:16

下面这张图就是我们要模拟的菜单功能

一、模拟的逻辑

1. 我们使用uni-popup组件（记得要用hbuilder X导入该组件）
uni-app官网

2. 将组件内的菜单自定义样式

二、uniapp代码写法vue3

<template><view><uni-popup ref="showMenu" type="right" mask-background-color="rgba(0,0,0,0.1)"><view class="popup-content"><view @click="doAction(1)">哈哈哈哈</view><view @click="doAction(2)">嘻嘻嘻嘻</view><view @click="doAction(3)">呜呜呜呜</view></view></uni-popup></view>
</template><script setup>import {ref,onMounted} from "vue";let showMenu = ref(null);onMounted({showPopup(); });//显示菜单const showPopup = () => {showMenu.value.open();}//处理菜单选项的动作const doAction = (index) => {console.log(index);showMenu.value.close();}</script><style scoped lang="scss">.popup-content {width: 300rpx;background-color: #F8f8f8;border-radius: 8px;padding: 16px;color: #e5e5e5;margin-top: 100rpx;margin-right: 16rpx;view{padding: 20rpx;}}
</style>

目前存在的问题：使用uni-popup是无法遮挡tabBar，因为tabBar是原生组件，这里的解决方案是subNVue（pages.json 页面路由 | uni-app官网）

三、subNVue改进版

1. subNVue 是 vue 页面的原生子窗体。用于解决App中 vue 页面中的层级覆盖和原生界面灵活自定义用的。

2. 它不是全屏页面，也不是组件，就是一个原生子窗体。它是一个 nvue 页面，使用 weex 引擎渲染。

=》翻译一下就是，它不能用文件去定义，而是用配置，就像JavaScript中用代码创建一个div标签一样，我们在page.json文件中配置它的宽度、高度、背景色。

使用subNVue逻辑

1. 在page.json中在一个页面下，定义一个subNVue子窗体。
=》解释：也就是该窗体属于当前页面，在当前页面上层出现。

2. 定义一个nvue文件，让它的内容，在subNVue子窗体内显示

3. 在index.vue野蛮，获取到子窗体，调用它的显示方法，显示子窗体和它的内容

具体使用方法要看文档uni-app subNVue 原生子窗体开发指南 - DCloud问答，我直接就将我的代码粘贴出来

1.在page.json配置subNVue子窗体

项目结构

pages

index

index.vue

subNVue
menu-sub.nvue

{"pages": [{"path": "pages/index/index","style": {"navigationStyle": "custom", //禁用原生导航栏，也可以使用titleNView为false"app-plus": {"bounce": "none", //关闭页面回弹效果"subNVues": [{"id": "custome-menu", //subNVue 的 id，可通过 uni.getSubNVueById('drawer') 获取"path": "pages/index/subNVue/menu-sub", // nvue 路径"type": "popup",                        //只有设置为popup类型，mask才管用"style": { "position": "absolute",  "dock": "bottom",  "width": "40%",  "height": "40%",  "background":"transparent","mask":"rgba(0,0,0,0)","zindex": 999,"right": "16rpx"}}]}}}]
}

2.子窗体显示的内容

<!-- 子窗体显示的内容 -->
<template><view class="popup-content"><view class="t1" @click="doAction(1)">长歌行</view><view class="t1" @click="doAction(2)">落日圆</view><view class="t1" @click="doAction(3)">我欲封天</view><view class="t1" @click="doAction(4)">万古长夜</view><view class="t1" @click="doAction(5)">清晨</view></view>
</template><script setup>import {ref} from "vue";//处理菜单选项的动作const doAction = (index) => {uni.showToast({title: index});//关闭菜单栏const subNVue = uni.getSubNVueById('custome-menu');subNVue.hide('fade-out',300);}
</script><style scoped lang="scss">.popup-content {width: 300rpx;background-color: #F8f8f8;border-radius: 8px;padding: 16px;color: $normal-font-color;margin-top: 100rpx;margin-right: 16rpx;.t1{padding: 20rpx;}}
</style>

3. 在index.vue页面触发显示子窗体和它的内容

<template></template><script setup>import {onMounted} from "vue";onMounted(() => {showMenu(); });//1. 显示菜单const showMenu = () => {const subNVue = uni.getSubNVueById('custome-menu');  //通过 id 获取 nvue 子窗体subNVue.show('slide-in-right', 300, function() {// console.log("打开了菜单栏");});}</script><style scoped lang="scss"></style>