已解决
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 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!