当前位置:首页 > 编程笔记 > 正文
已解决

uniapp 模仿 Android的Menu菜单栏

来自网友在路上 156856提问 提问时间:2023-10-30 07:01:17阅读次数: 56

最佳答案 问答题库568位专家为你答疑解惑

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

一、模拟的逻辑

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>

 

查看全文

99%的人还看了

猜你感兴趣

版权申明

本文"uniapp 模仿 Android的Menu菜单栏":http://eshow365.cn/6-27689-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!