uniapp imitates Android's Menu menu bar

The picture below is the menu function we want to simulate. 

1. Simulation logic

1. We use the uni-popup component (remember to use hbuilder X to import this component)
uni-app official website

2. Customize the style of the menu in the component

2. Uniapp code writing method 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>

Currently existing problem: tabBar cannot be covered using uni-popup, because tabBar is a native component. The solution here is subNVue (pages.json page routing | uni-app Official website)
 

3. Improved version of subNVue

1. subNVue is the native subform of the vue page. It is used to solve the hierarchical coverage and flexible customization of the native interface in the vue page in the App.

2. It is not a full-screen page, nor a component, but a native sub-form. It is an nvue page, rendered using weex engine.

=》The translation is that it cannot be defined in a file, but configured. Just like using code to create a div tag in JavaScript, we configure its width in the page.json file. , height, background color.

Use subNVue logic

1. In page.json, define a subNVue subform under a page.
=》Explanation: That is, the form belongs to the current page and appears on the upper level of the current page.

2. Define an nvue file so that its content is displayed in the subNVue subform

3. Go wild in index.vue and get the subform , call its display method to display the subform and its content

 Please refer to the documentation for specific usage methodsuni-app subNVue Native Subform Development Guide - DCloud Q&A, I will directly add my code Paste it

1. Configure the subNVue subform in page.json

Project structure

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. Content displayed in the subform

<!-- 子窗体显示的内容 -->
<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. Trigger the display of the subform and its content on the index.vue page

<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>