uni-app前端H5页面底部内容被tabbar遮挡

news2024/9/27 23:28:51

在这里插入图片描述
如果你想在原生 tabbar 上方悬浮一个菜单,之前写 bottom:0。这样的写法编译到 h5 后,这个菜单会和 tabbar 重叠,位于屏幕底部。
原码:

<view style="position: fixed;bottom:0;left: 0;background-color: #007AFF;
		right: 0;height: 100rpx;line-height: 106rpx;z-index: 99;">
			<view class="d-flex j-sa a-center">
				<label class="radio">
					<radio @tap="checkall" :checked="checkedall" color="#ee5f0d" />
					<text>全选</text>
				</label>
				<text>合计:{{ totalmoney }}yuan</text>
				<text @tap="topay">结算</text>
			</view>
		</view>

在这里插入图片描述

uniapp增加了两个属性:

--window-top 
--window-bottom

APP 和小程序的导航栏和 tabbar 均是原生控件,元素区域坐标是不包含原生导航栏和 tabbar 的;而 H5 里导航栏和 tabbar 是 div 模拟实现的,所以元素坐标会包含导航栏和 tabbar 的高度

在这里插入图片描述
使用: bottom:var(–window-bottom);
刚一开始我写在了bottom:0;这里,没有执行。但是多加padding-bottom可以执行。
padding-bottom: var(–window-bottom);

在这里插入图片描述
如果高度不够,可以使用:

padding-bottom: calc(var(–window-bottom) + 20px);

  1. var(–status-bar-height) 变量在微信小程序环境为固定 25px,在 App 里为手机实际状态栏高度。
  2. 当设置 “navigationStyle”:“custom” 取消原生导航栏后,由于窗体为沉浸式,占据了状态栏位置。此时可以使用一个高度为 var(–status-bar-height) 的 view 放在页面顶部,避免页面内容出现在状态栏。
  3. 由于在 H5 端,不存在原生导航栏和 tabbar,也是前端 div 模拟。如果设置了一个固定位置的居底 view,在小程序和App端是在 tabbar 上方,但在 H5 端会与 tabbar 重叠。此时可使用 --window-bottom,不管在哪个端,都是固定在 tabbar 上方。
  4. 目前 nvue 在App端,还不支持 --status-bar-height变量,替代方案是在页面 onLoad 时通过 uni.getSystemInfoSync().statusBarHeight 获取状态栏高度,然后通过 style 绑定方式给占位 view 设定高度。

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

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

相关文章

PythonWeb Django PostgreSQL创建Web项目(二)

安装数据库PostgreSQL并创建数据库 我第一次尝试使用PostgreSQL数据库&#xff0c;why&#xff1f;我喜欢它提供的丰富的数据类型&#xff0c;例如货币类型、枚举类型、几何类型(点、直线、线段、矩形等等)、网络地址类型、文本搜索类型、XML类型JSON类型等等&#xff0c;非常…

Web3中文|聊聊这个让Opensea头疼的新对手Blur ($BLUR)

2022年10月19日&#xff0c;NFT市场迎来一个新的平台。 这个被精心设计的NFT交易市场和聚合器被命名为Blur。 与其他NFT平台不同&#xff0c;Blur旨在提升专业交易者的NFT交易体验。它的开发团队认为其他交易平台存在界面混杂、无法获取分析数据和工具、处理速度缓慢等问题。…

postman使用简介

1、介绍 postman是一款功能强大的网页调试和模拟发送HTTP请求的Chrome插件&#xff0c;支持几乎所有类型的HTTP请求 2、下载及安装 官方文档&#xff1a;https://www.getpostman.com/docs/v6/ chrome插件&#xff1a;chrome浏览器应用商店直接搜索添加即可&#xff08;需墙&…

在魔改PLUS-F5280开发板上使用合封qsp iflash

文章目录引言硬件调整软件调整总结引言 由于目前灵动官网暂未发布正式版的PLUS-F5280开发板&#xff0c;可以使用现有的PLUS-F5270 v1.2开发板&#xff08;下文简称PLUS-F5270开发版&#xff09;替换为MM32F5280微控制器芯片&#xff0c;改装为PLUS-F5280开发板。本文记录了使…

【Mybatis源码解析】mapper实例化及执行流程源码分析

文章目录简介环境搭建源码解析基础环境&#xff1a;JDK17、SpringBoot3.0、mysql5.7 储备知识&#xff1a;《【Spring6源码・AOP】AOP源码解析》、《JDBC详细全解》 简介 基于SpringBoot的Mybatis源码解析&#xff1a; 1.如何对mapper实例化bean 在加载BeanDefinition时&a…

哈希表题目:矩阵置零

文章目录题目标题和出处难度题目描述要求示例数据范围进阶解法一思路和算法代码复杂度分析解法二思路和算法代码复杂度分析解法三思路和算法代码复杂度分析题目 标题和出处 标题&#xff1a;矩阵置零 出处&#xff1a;73. 矩阵置零 难度 3 级 题目描述 要求 给定一个 m…

oracle单库重建undo表空间步骤

前言&#xff1a;undo表空间不足可直接增加空间&#xff1b; alter tablespace UNDOTBS1 add datafile /data/oradata/datafile/UNDOTBS102.dbf size 30g autoextend off; 注&#xff1a;单次增加最大不得超过32G 回收空间 缩小表空间直接可以resize命令缩小&#xff1b…

webpack(高级)--创建自己的loader 同步loader 异步loader loader参数校验

webpack 创建自己的loader loader是用于对模块的源代码进行转换&#xff08;处理&#xff09; 我们使用过很多loader 比如css-loader style-loader babel-loader 我么如果想要自己创建一个loader 首先创建webpack环境 pnpm add webpack webpack-cli -D 之后创建loader模块…

Hadoop初步理解

产生原因 在之前&#xff0c;数据量小&#xff0c;增长速度慢&#xff0c;且数据基本都是文件。储存和处理这些数据并不麻烦&#xff0c;单个存储单元和处理器组合就可以。 之后随着互联网发展&#xff0c;产生了大量多种形式的数据。 非结构化数据&#xff1a;邮件、图像、音…

盘点3个.Net开发的WMS仓库管理系统

更多开源项目请查看&#xff1a;一个专注推荐.Net开源项目的榜单 仓库管理系统在企业中&#xff0c;重要性越来越高&#xff0c;不仅可以提高效率&#xff0c;还能降低企业的压力&#xff0c;企业通过协调和优化资源使用和物料流动&#xff0c;能极大程度地提升了管理效率&…

中国500强|长虹控股集团携手契约锁,推动采购-人事业务电子签

四川长虹电子控股集团&#xff08;以下简称“长虹控股集团”&#xff09;是国内知名的电器制造商之一&#xff0c;拥有六家上市公司、一家新三板的公众公司&#xff0c;入选世界品牌500强、中国企业家协会发布的中国500强企业榜单。此次&#xff0c;长虹控股集团携手契约锁打造…

数据分析与SAS学习笔记3

SAS在最新的展示图&#xff0c;表现力比较丰富。 SAS的处理流程&#xff1a; 数据步 过程步&#xff1a; ETL是数据分析非常重要的步骤。70%-90%花在收集数据以及整理数据&#xff0c;数据分析数据的时间不是很多的。 一个完整的数据步和过程步&#xff1a; 数据步基本语句总…

新手学习node.js基础,node.js安装过程,node.js运行环境及javascript运行环境.

学习node.js1.什么是node.js?2.node.js中的javaScript运行环境3.node.js可以做什么&#xff1f;4. node.js学习思路5.node.js环境的安装6.如何在node.js中执行JavaScript代码1.什么是node.js? node.js是一个基于Chrome v8 引擎的JavaScript运行环境(后端) node.js官网 &…

Flutter for Android

将 Flutter 添加到现有应用程序 在 Flutter 中一次重写整个应用程序是不切实际的。 对于这些情况&#xff0c;Flutter 可以作为库或模块逐步集成到您现有的应用程序中。 然后可以将该模块导入到您的 Android 或 iOS&#xff08;当前支持的平台&#xff09;应用程序中&#xff…

GEE学习笔记 八十六:分类中的特征重要性分析

之前在GEE中做随机森林分类时候&#xff0c;很多人都在问如何做特征重要性分析&#xff1f;但是在GEE之前并没有相关API可以做特征重要性分析&#xff0c;最新的API更新后GEE也可以做特征重要性分析了。 1、目前常用的包含特征重要信息分析的分类方法包括&#xff1a; &#…

基础篇:03-SpringCloud工程部署启动

目录 1.工程搭建部署 方案一&#xff1a;完整工程导入 方案二&#xff1a;从零开始搭建 1.工程与module创建 2.数据库导入 3.项目启动 3.1 启动并访问user-service 3.2 启动并访问order-service 4.服务远程调用 时序图说明 服务远程调用实现 注入RestTemplate Res…

自学web前端觉得好难,可能你遇到了这些困境

好多人跟我说上学的时候也学过前端&#xff0c;毕业了想从事web前端开发的工作&#xff0c;但自学起来好难&#xff0c;快要放弃了&#xff0c;所以我总结了一些大家遇到的困境&#xff0c;希望对你会有所帮助。 目录 1. 意志是否坚定 2. 没有找到合适自己的老师 3. 为了找…

论文阅读【PAMI_2022】FSGANv2: Improved Subject Agnostic Face Swapping and Reenactment

论文阅读【PAMI_2022】FSGANv2: Improved Subject Agnostic Face Swapping and Reenactment论文的缩写全拼一、摘要&#xff08;问题&#xff0c;贡献&#xff0c;效果&#xff09;二、引言&#xff08;idea&#xff09;三、方法(FSGAN)1.Detection and tracking2.Generator ar…

node学习-3:服务器渲染和客户端渲染

1. 概念 一.服务端渲染&#xff0c;后端嵌套模板&#xff0c;后端渲染模板&#xff0c;SSR&#xff08;后端把页面组装好&#xff09; 做好静态页面&#xff0c;动态效果 把前端代码提供给后端&#xff0c;后端则把静态html以及里面的假数据给删除掉 通过模板进行动态生成h…

8个让你收入翻倍的高质量免费网站

毕业几年了&#xff0c;如果你的月薪不到1w&#xff0c;还是做着重复机械的动作&#xff0c;现在马上往下看&#xff0c;今天分享6个资源网站让你的收入暴增&#xff0c;尤其是最后一个。每天花一个小时&#xff0c;让你工资翻倍&#xff0c;从此在职场横着走&#xff0c;再也不…