uniapp小程序获取右上角胶囊位置信息

在这里插入图片描述

文章目录

  • 导文
  • 使用uni.getMenuButtonBoundingClientRect();方法实现
      • 完整案例
  • 隐藏默认导航栏:
    • 全局隐藏
    • 当前页面隐藏


导文

uniapp小程序获取右上角胶囊位置信息

使用uni.getMenuButtonBoundingClientRect();方法实现

<script>const menuButtonInfo = uni.getMenuButtonBoundingClientRect();export default {data() {return {menuButtonInfo: menuButtonInfo, //右侧胶囊详细信息}},onLoad() {// this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();// console.log('onLoad',uni.getMenuButtonBoundingClientRect());},onReady() {console.log('onReady');console.log('onReady',uni.getMenuButtonBoundingClientRect());},methods: {}}
</script>

在这里插入图片描述

完整案例

在这里插入图片描述

<template><view class="checkIn"><view class="checkIn-date" :style="{ padding: capsulePadding() }"><view class="checkIn-nav" :style="{ height: capsuleHeight() }"><uni-icons type="plus-filled" size="30" color="#ffffff"></uni-icons></view><view class="checkIn-data-main"></view></view><view class="checkIn-main"><uni-card title="标题文字" thumbnail="" extra="额外信息" note="Tips">内容主体,可自定义内容及样式</uni-card></view></view>
</template><script>export default {components: {},data() {return {}},onLoad() {},onReady() {console.log('onReady');},methods: {// 获取胶囊高度capsuleHeight() {if (uni?.getMenuButtonBoundingClientRect()) {return `${uni.getMenuButtonBoundingClientRect().height + uni.getMenuButtonBoundingClientRect().top * 2}px`;} else {return `100px`;}},// 获取侧边宽度capsulePadding() {if (uni?.getMenuButtonBoundingClientRect()) {const res = uni.getSystemInfoSync().windowWidth;return `0px ${res - uni.getMenuButtonBoundingClientRect().right}px`;} else {return `10px`;}}}
}
</script><style lang="scss">
.checkIn {.checkIn-date {width: 100%;height: 200px;background-image: url('../../static/checkIn/top-back.png');}.checkIn-nav {width: 100%;height: 148px;display: flex;align-items: center;}
}
</style>

隐藏默认导航栏:

全局隐藏

在你的页面 pages.json 配置中,为相应的页面设置 navigationStylecustom,这将隐藏默认的导航栏。

  	"globalStyle": {"navigationStyle": "custom"},

当前页面隐藏

   {"pages": [{"path": "pages/index/index","style": {"navigationStyle": "custom"}},// ... 其他页面配置]}

您好,我是肥晨。
欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。

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

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

相关文章

被神化了的AI

多模态的大模型&#xff0c;已经在图片、文本、音频、视频领域多点开花&#xff0c;“AI取代人类”的声音不绝与耳&#xff0c;似乎AI是万能药&#xff0c;包治百病。所有互联网时代的应用&#xff0c;都可以用AI重做一遍&#xff0c;所有你能用到的难题&#xff0c;你都会想&a…

【python】flask中如何向https服务器传输信息

【背景】 用flask做一个支持流媒体传输的网页,如何将信息post给流媒体服务器呢? 【方法】 简单例子,视图函数这么写: url = "https://yourip/mytext" headers = {Content-Type:application/octet-stream} @app.route(/,methods=["POST"

zdppy_amauth如何测试批量获取用户绑定的所有权限:思路

简单的思路 1、添加用户 2、添加角色 3、绑定用户和角色的关系 4、添加3个权限 5、绑定角色和权限关系&#xff0c;给角色绑定2个权限 6、查询用户绑定的所有权限 7、删除用户 8、删除角色 9、删除权限 10、解绑用户的所有角色 11、解绑角色的所有权限

ffmpeg音视频开发从入门到精通——ffmpeg下载编译与安装

音视频领域学习ffmpeg的重要性 音视频领域中ffmpeg的广泛应用&#xff0c;包括直播、短视频、网络视频、实时互动和视频监控等领域。掌握FM和音视频技术可以获得更好的薪酬。 学习建议音视频学习建议与实战应用 音视频处理机制的学习&#xff0c;需要勤加练习&#xff0c;带…

第6章 工程项目融资 作业

第6章 工程项目融资 作业 一单选题&#xff08;共2题&#xff0c;40分&#xff09; (单选题) 项目资金结构不包括&#xff08; &#xff09;。 A.项目债务资金结构比例 B. 项目建设投资与工程项目总成本费用的比例 C. 项目资本金内部结构比例 D. 项目资本金与债务资金的比例 正…

【C++题解】1741 - 求出1~n中满足条件的数的个数和总和?

问题&#xff1a;1741 - 求出1~n中满足条件的数的个数和总和&#xff1f; 类型&#xff1a;简单循环 题目描述&#xff1a; 请求出 1∼n 之间所有满足 2 的倍数但不是 3 的倍数的数&#xff0c;有多少个&#xff0c;总和是多少&#xff1f; 输入&#xff1a; 读入一个整数 …

构建智慧高速公路:软件管理平台业务架构解析

随着交通网络的不断完善和技术的快速发展&#xff0c;智慧高速公路正成为交通领域的重要发展方向。在智慧高速公路系统中&#xff0c;软件管理平台扮演着关键的角色&#xff0c;它不仅是管理各种设备和系统的核心&#xff0c;还承担着数据监控、故障诊断、维护管理等重要任务。…

任务调度框架革新:TASKCTL在Docker环境中的高级应用

Docker&#xff1a;轻量级容器化技术的魅力 Docker 作为一款开源的轻量级容器化技术&#xff0c;近年来在 IT 界掀起了一股热潮。它通过封装应用及其运行环境&#xff0c;使得开发者可以快速构建、部署和运行应用。Docker 的优势在于其轻量级、可移植性和可扩展性&#xff0c;它…

【Python】Flask中如何定位静态文件资源

【背景】 习惯了Flask配合tornado做SAAS服务,所以有些开源的项目也希望吸纳到这个体系。这种情况下index主页需要放到templates文件夹下,静态资源需要放到static文件夹下,html内部调用资源的路径也需要改变。 【调用方法】 推荐: 把所有JS,CSS等资源放到static文件夹下…

MacOS M1 中 Docker DeskTop的初入门

希望文章能给到你启发和灵感~ 感谢支持和关注~ 阅读指南 什么是docker?核心的组件有哪些?一、基础环境说明1.1 硬件环境1.2 软件环境二、Docker的安装三、界面和功能简单介绍四、简单示范使用4.1 拉取一个镜像4.2 设置并启动容器四、博主遇到的问题什么是docker? 针对M1芯…

基于python+django的深度学习的身份证识别考勤系统【D1】

简介&#xff1a; 基于Python和Django开发的深度学习身份证识别考勤系统&#xff0c;利用深度学习算法&#xff0c;能够智能化地分析上传的身份证照片&#xff0c;准确识别和提取姓名及号码信息。这一技术不仅简化了传统考勤过程&#xff0c;还显著提升了数据的精确性和管理效率…

异地如何共享视频文件?

人们对于信息流动的需求越来越高。尤其在分布式团队合作、远程办公的背景下&#xff0c;异地共享视频文件成为了一项重要的技术需求。本文将介绍一款名为【天联】的组网产品&#xff0c;它能够实现不同地区间快速组建局域网&#xff0c;解决不同设备间的信息远程通信问题。 2.…

计算机网络期末复习——简明扼要介绍考点及相关知识

期末复习的方法论&#xff1a;一般来说&#xff0c;期末复习都是“理论”结合“实践”。 理论&#xff0c;在于要对期末考点有基本的把握。可以询问老师或者师兄&#xff0c;总之要知道考试的重点在哪里。对照教材&#xff0c;勾画考试重点&#xff0c;删去不重要的琐碎知识点。…

NLP基础概念

NLP任务不同于CV任务&#xff0c;它存在更多难点&#xff0c;例如&#xff1a; 数据表示&#xff1a;NLP任务处理的是文本数据&#xff0c;需要将自然语言文本转化为计算机可处理的形式&#xff0c;即如何把字符串变为数值数据&#xff0c;常用的有词嵌入&#xff08;Word Embe…

C++ 字符串编辑距离代价计算

描述 给定两个字符串str1和str2&#xff0c;再给定三个整数ic&#xff0c;dc和rc&#xff0c;分别代表插入、删除和替换一个字符的代价&#xff0c;请输出将str1编辑成str2的最小代价。 数据范围&#xff1a;0≤∣&#x1d460;&#x1d461;&#x1d45f;1∣,∣&#x1d460;…

搭建群辉AudioStation音乐库

目录 1、安装套件 2、配置歌词插件 3、配置音乐库 4、PC端使用 5、手机APP (1)DS Audio (2)音流 6、关于歌曲信息及封面 (1)歌词 (2)封面 作为音乐爱好者,在NAS上存了大量的无损音乐,用文件流量的方式播放,体验未免欠佳。这次我们打造自己的音乐库,随时随…

昇思25天学习打卡营第3天|数据集 Dataset|数据变换 Transforms

学AI还能赢奖品&#xff1f;每天30分钟&#xff0c;25天打通AI任督二脉 (qq.com) 数据集 Dataset 数据是深度学习的基础&#xff0c;高质量的数据输入将在整个深度神经网络中起到积极作用。MindSpore提供基于Pipeline的数据引擎&#xff0c;通过数据集&#xff08;Dataset&am…

探寻Scala的魅力:大数据开发语言的入门指南

大数据开发语言Scala入门 一、引言1.1 概念介绍1.2 Scala作为大数据开发语言的优势和应用场景1.2.1 强大的函数式编程支持1.2.2 可与Java无缝集成1.2.3 高性能和可扩展性1.2.4 大数据生态系统的支持 二、Scala基础知识2.1. Scala简介&#xff1a;2.1.1 Scala的起源和背景2.1.2 …

2024广东省职业技能大赛云计算赛项实战——容器化部署Nginx

容器化部署Nginx 前言 编写Dockerfile文件构建nginx镜像&#xff0c;要求基于centos完成Nginx服务的安装和配置&#xff0c;并设置服务开机自启。 编写Dockerfile构建镜像erp-nginx:v1.0&#xff0c;要求使用centos7.9.2009镜像作为基础镜像&#xff0c;完成Nginx服务的安装&…

基于微信共享充电桩小程序毕业设计作品成品(3)开发技术文档_充电桩小程序前端技术栈

后台管理系统文件 所在路径&#xff1a;后台源码ht目录是后台 绿色显示的是系统框架&#xff0c;不要动 位置程序名说明源码根目录login.php后台登录页面源码根目录check_u_login.php后台登录处理程序ht 后台根目录index.php后台首页left.php后台左侧菜单u_logout.php退出登…