下面这张图就是我们要模拟的菜单功能
一、模拟的逻辑
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>
