uni-app 高度自适应

2023-10-27

方法一已知固定高度
**注意 scrollH 初始值不等大于最终显示的高度,如果封装组件,onReady () **

	onLoad() {
		// 获取可视区域高度,减去固定高度
		uni.getSystemInfo({
			success: res => {
				this.scrollH = res.windowHeight - uni.upx2px(82);
			}
		});
	},

方法二 动态获取固定高度

	onLoad() {
		this.$nextTick(function() {
			uni.getSystemInfo({
				success: res => {
					const query = uni.createSelectorQuery().in(this);
					query.select('#scrollH').boundingClientRect(data => {
							// this.scrollH = `${data.height}px;`;
							console.log(data.height)
						}).exec();
				}
			});
		});
	},

方法三 使用flex,封装组件





以上微信小程序测试成功,其他未测试,如有问题请留言

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

uni-app 高度自适应 的相关文章

  • GEE-页面介绍

    页面介绍 一 首页介绍 二 Datasets 1 Home首页介绍 1 1Climate and Weather 对应上面的 Browse by tags 标签 即为按照标签访问数据 1 2Imagery 对应上面的 landsat MOD
  • 蓝桥杯JAVA B组 2020(2)第三题 合并检测

    一 题目描述 如果结果为阴性 则说明这 k个人都是阴性 用一个试剂盒完成了 k 个人的检测 如果结果为阳性 则说明至少有一个人为阳性 需要将这 k 个人的样本全部重新独立检测 加上最开始的合并检测 一共使用了 k 1 个试剂盒完成了 k 个

随机推荐

  • 基于ssm框架的毕业设计管理系统 毕业设计-附源码211633

    摘 要 随着科学技术的飞速发展 各行各业都在努力与现代先进技术接轨 通过科技手段提高自身的优势 对于毕业设计管理系统当然也不能排除在外 随着网络技术的不断成熟 带动了毕业设计管理系统 它彻底改变了过去传统的管理方式 不仅使服务管理难度变低了
  • VMware出现“该虚拟机似乎正在使用中”问题

    按照以下步骤解决虚拟机异常关机无法打开问题 1 在用VMware虚拟机的时候 有时会发现打开虚拟机时提示 该虚拟机似乎正在使用中 如果该虚拟机未在使用 请按 获取所有权 T 按钮获取它的所有权 否则 请按 取消 按钮以防损坏 配置文件 D
  • Android——使用DatePicker和TimePicker显示当前日期和时间

    1 DatePicker和TimePicker两种实现动态输入日期和时间的功能 2 DatePickerDialog和TimePickerDialog两种实现动态输入日期和时间的对话框 3 两组监测日期和时间改变的监听器 1 OnDateC
  • vue中使用百度地图 添加标记物,点击标记物弹窗,画运动轨迹,位置纠偏,逆地址解析

    在vue项目中使用百度地图 添加标记物 位置纠偏 信息弹窗 画轨迹 坐标转换 逆地址解析 参考vue baidu map开发文档 安装 npm install vue baidu map save 全局注册 在main js中引入以下代码
  • 【Vue】关于开发中本地图片加载失败的经验总结

    文章目录 1 图片存放在assets 2 图片存放在static中 3 其他需要注意的点 我的源码 img或者el avatar中的src没有提供静态值 而是绑定一个动态变量 如果这个变量的路径是存放在assets里 则图片会加载失败 1
  • nginx代理路径配置总结

    一 发现问题 配置nginx代理的时候 发现location配置的路径和代理的上下文路径的组合不同 服务端接收到的uri的路径不同 导致了controller的RequestMapping匹配出现问题 所以就仔细研究了一下nginx路径配置
  • 对象属性拷贝(BeanUtils.copyProperties)用法

    系列文章目 对象属性拷贝 BeanUtils copyProperties 用法 一 BeanUtils copyProperties参数赋值顺序 根据导包不同 方式不同 一个为org springframework beans BeanU
  • MySQL数据库渗透及漏洞利用总结

    Mysql数据库是目前世界上使用最为广泛的数据库之一 很多著名公司和站点都使用Mysql作为其数据库支撑 目前很多架构都以Mysql作为数据库管理系统 例如LAMP 和WAMP等 在针对网站渗透中 很多都是跟Mysql数据库有关 各种Mys
  • FCKEditor 2.3.2 的type漏洞修复

    从网上下了最新的FCKeditor 2 3 2和对应的JSP整合文件FCKeditor 2 3 安装后进行测试 发现type漏洞仍然存在 汗 漏洞情况是 或在type后面跟上一个非file image flash media参数 就可以上传
  • 探索数据分析与可视化:使用R语言实现

    探索数据分析与可视化 使用R语言实现 概述 数据分析与可视化是现代数据科学中至关重要的环节 R语言作为一种强大的统计分析工具和编程语言 提供了丰富的功能和库来处理数据 进行统计分析和生成可视化图表 本文将介绍如何使用R语言进行数据分析与可视
  • 关于 cocos2d-x win32 版本的 cpu 占用改良

    初学 c2dx 下载的 2 02 版本 发现其 HelloWorld 演示项目 居然一直占据了 100 的 CPU 猜测它有可能是在主循环里使用了 Sleep 0 一搜 果然定位到具体代码 它位于 cocos2dx platform win
  • Flutter常用布局方式

    文章目录 flutter 布局介绍 一 Container 布局 1 属性 2 示例 二 线性布局 1 说明 2 属性 3 示例 三 弹性布局 Flex 1 属性 2 Expanded 的使用 3 示例 四 流式布局 1 说明 2 属性 3
  • 方差、标准差、平方差、残差

    2018 06 21 创建人 Ruo Xiao 邮箱 xclsoftware 163 com 2018 06 29 修改人 Ruo Xiao 增加对残差的说明 一 方差 1 定义 数据分别与其平均数的差的平方和的平均数 由 D 表示 2 意
  • Nssm 安装Window服务

    环境 Wind10 1 下载nssm exe 官网 http nssm cc download 2 解压 根据操作系统选择32位或64位nssm 在该目录启动命令行窗口 3 服务注册 命令行输入 nssm exe install XX或者n
  • 在CentOS7上安装RabbitMQ(RPM安装方式)

    首先需要安装erlang 参考 http fedoraproject org wiki EPEL FAQ howtouse rpm Uvh https download fedoraproject org pub epel epel rel
  • SQL命令笔记

    sql中的排序倒序 排序采用 order by 子句 order by 后面跟上排序字段 排序字段可以放多个 多个采用逗号间隔 order by默认采用升序 asc 如果存在 where 子句 那么 order by 必须放到where 语
  • 使用VS配置OCCI环境

    一 配置方法 1 准备好occi的两个配置文件sdk与basic 之后将VS内的设置环境为release x64 2 c c 常规 附加库包含目录 F programmsoftware occi instantclient sdk wind
  • IDEA插件之 时序图 -- Sequence Diagram

    安装插件 使用 在方法上右击选择 Sequence Diagram 设置参数 可在控制台内查看时序图结果
  • 【数据结构与算法】树状数组

    Fenwick Tree 树状数组 Binary Indexed Tree 又称 Fenwick Tree 是一种基于数组实现的数据结构 用于高效地动态维护前缀和 树状数组可以在 O log n
  • uni-app 高度自适应

    方法一已知固定高度 注意 scrollH 初始值不等大于最终显示的高度 如果封装组件 onReady onLoad 获取可视区域高度 减去固定高度 uni getSystemInfo success res gt this scrollH