uniapp 模仿 Android的Menu菜单栏

素颜马尾好姑娘i 2024-04-22 15:20 73阅读 0赞

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

![d64bf7bdd5f84b6f9e8b8aff727f1455.gif][]

## 一、模拟的逻辑 ##

> 1. 我们使用uni-popup组件（记得要用hbuilder X导入该组件）  
> [uni-app官网][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官网][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问答][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>

[d64bf7bdd5f84b6f9e8b8aff727f1455.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/3db9476d20f841d0a6538b23ca538037.gif
[uni-app]: https://uniapp.dcloud.net.cn/component/uniui/uni-popup.html#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95
[pages.json _ _ uni-app]: https://uniapp.dcloud.net.cn/collocation/pages.html#app-subnvues
[uni-app subNVue _ - DCloud]: https://ask.dcloud.net.cn/article/35948