uniapp 模仿 Android的Menu菜单栏

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

一、模拟的逻辑

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>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/155168.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

moviepy处理手机端图片旋转问题

1.手机拍摄的图片或者在ffmpeg处理的时候&#xff0c;会读取图片的元数据从而进行旋转 左边是拍摄的图片&#xff0c;右侧是进行处理以后得图片 video VideoFileClip(file_path) if video.rotation in (90, 270):video video.resize(video.size[::-1])video.rotation 0

精品站长网交易系统源码/虚拟交易网站程序源码/虚拟交易平台带店铺处罚商品处罚

精品站长网交易系统源码&#xff0c;虚拟交易网站程序源码&#xff0c;虚拟交易平台带店铺处罚商品处罚。带申诉功能&#xff0c; 带提现通知功能&#xff0c; 带熊掌号推送功能&#xff0c; 带站内信息功能。 下载地址&#xff1a;https://bbs.csdn.net/topics/617494651

JS逆向爬虫---请求参数加密① 【某度翻译】

接口定位 抓包输入翻译关键词 全局搜索关键词,定位到接口https://fanyi.baidu.com/v2transapi 全局搜索sign 多次尝试定位变化参数sign 断点调试b函数 估值整个function&#xff0c;并测试函数运行结果 缺少r参数&#xff0c;可以通过多次输入调试&#xff0c;定位r参数的…

产品解读 | GreatADM如何高效实现数据库资源池化部署?

前段时间&#xff0c;介绍了万里数据库的GreatADM数据库管理平台如何图形化部署MGR&#xff08;详见文章&#xff1a;探索GreatADM&#xff1a;如何快速定义监控&#xff09;&#xff0c;有朋友想了解GreatADM是否支持资源池化管理、租户隔离、监控等功能。 今天&#xff0c;我…

代购商城源码是否可以定制开发?

定制开发&#xff0c;符合个性需求 代购商城源码是现代电子商务中的重要工具&#xff0c;它为代购商提供了建立在线店铺、管理产品和订单、处理支付和物流等功能。然而&#xff0c;对于不同的代购商而言&#xff0c;在源码的基础上进行个性化定制开发无疑是提升竞争力和用户体验…

SpringCloud 微服务全栈体系(七)

第九章 Docker 一、什么是 Docker 微服务虽然具备各种各样的优势&#xff0c;但服务的拆分通用给部署带来了很大的麻烦。 分布式系统中&#xff0c;依赖的组件非常多&#xff0c;不同组件之间部署时往往会产生一些冲突。在数百上千台服务中重复部署&#xff0c;环境不一定一致…

制作一个可以arm架构下运行的docker镜像(for Python)

看完本篇文章&#xff0c;你将得到一个可以arm架构下运行的python 基础镜像。 题外话 这里直接说docker镜像有点儿草率&#xff0c;因为目前很多容器都是Podman了。 podman的介绍 arm和aarch傻傻分不清楚 现在这两个是一样的意思了。 arm64和aarch64之间的区别 开始制作镜…

Flask-SQLAlchemy事件钩子介绍

一、前言 前几天在搜资料的时候无意中看到有介绍SQLAlchemy触发器&#xff0c;当时感觉挺奇怪的&#xff0c;触发器不是数据库层面的概念吗&#xff0c;怎么flask-SQLAlchemy这个ORM框架会有这玩意。 二、SQLAlchemy触发器一个简单例子 考虑到效率博客表中有两个字段&#xf…

Linux学习第28天:Platform设备驱动开发(二): 专注与分散

Linux版本号4.1.15 芯片I.MX6ULL 大叔学Linux 品人间百味 思文短情长 三、硬件原理图分析 四、驱动开发 1、platform设备与驱动程序开发 53 /* 54 * 设备资源信息&#xff0c;也就是 LED0 所使用的所有寄存器 55 */ 56 static str…

使用requests库进行HTTP爬虫编程

目录 一、安装requests库 二、发送HTTP请求 三、解析HTML页面 四、处理HTTP响应和异常 五、使用代理和会话管理 六、使用多线程或多进程提高效率 七、数据存储和处理 八、注意事项和总结 在当今的数字化世界中&#xff0c;数据已经成为了一种宝贵的资源。而网络爬虫程序…

[HNCTF 2022 WEEK2]easy_include 文件包含遇上nginx

这道纯粹记录 完全没想到 <?php //WEB手要懂得搜索if(isset($_GET[file])){$file $_GET[file];if(preg_match("/php|flag|data|\~|\!|\|\#|\\$|\%|\^|\&|\*|\(|\)|\-|\_|\|\/i", $file)){die("error");}include($file); }else{highlight_file(__…

国标GB28181安防视频平台EasyGBS显示设备无法注册是什么原因?该如何解决?

国标GB28181协议视频平台EasyGBS&#xff0c;是基于国标GB28181协议的视频云服务平台&#xff0c;支持多路设备同时接入&#xff0c;并对多平台、多终端分发出RTSP、RTMP、FLV、HLS、WebRTC等格式的视频流。平台可提供视频监控直播、云端录像、云存储、检索回放、智能告警、语音…