uniapp计算剩余高度相关的坑

原创 已于 2022-03-02 17:49:04 修改 · 951 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

于 2022-03-02 17:38:06 首次发布
本文介绍了在uni-app中如何通过uni.getSystemInfo获取屏幕真实高度，并考虑原生导航栏和自定义导航栏的情况进行高度适配。在created()生命周期中，开发者减去了460单位的原生导航栏高度（转换为px），以得到可视区域的实际高度，确保内容区域正确布局。

1、通过 uni.getSystemInfo获取系统信息

这里用到了windowHeight，如果页面当前存在原生导航栏和原生tabbar底部栏，这里获取的数据是扣除了这两部分的，反之，如果自定义导航栏了，则是全部屏幕的高度，

created() {
   
   
		 // 获取可视区域的高度
		 uni.getSystemInfo({
   
   
		 	success: res => {
   
   
		 	    //460是rpx ，顶部元素的高度
		 		// 因为获取的高度是px，设置的是upx ，需要转换
		 		this
最低0.47元/天 解锁文章
uniapp使用scroll-view自动计算剩余高度实现滚动效果
qq_43640535的博客
08-17 2306
uniapp使用scroll-view自动计算剩余高度
小程序中计算剩余页面高度
懒羊羊我小弟的博客
08-13 2230
小程序中计算剩余页面高度 ​ 在小程序中当我们使用scroll-view组件时需要给设定一个高度，适配屏幕剩余高度，由于没有手机的屏幕尺寸不一样无法给出固定值，这个时候就需要使用到动态计算页面剩余高度。在uniapp中提供了 uni.createSelectQuery() 方法。 一、uni.createSelectQuery() ​ 返回一个 SelectorQuery 对象实例。可以在这个实例上使用 select 等方法选择节点，并使用 boundingClientRect 等方法选择需要查询的信息
【uni-app】动态计算窗口剩余高度
string佳佳的博客
06-09 845
1、同步 uni.getSystemInfo 2、异步 uni.getSystemInfoSync
uniapp怎么获取元素高度，获取元素节点信息，获取界面剩余高度
A1123352950的博客
09-08 1万+
uniapp获取元素高度，获取元素信息，以及获取页面剩余高度问题的解决方案
uni-app 获取页面剩余高度 所占手机屏幕的剩余高度
yu_0119的博客
09-03 1802
uniapp 获取页面可用高度 *在created*中 let _this = this; const query = uni.createSelectorQuery().in(this); query .select("#website-list") .boundingClientRect((data) => { console.log("得到布局位置信息" + JSON.stringify(data)); _this.
uniapp 填充剩余高度
sayyy的专栏
08-02 4025
前言 Hbuilder X 2.7.14.20200618 （不清楚uniapp的版本，用工具版本代替） 需求，如下图： 尝试 Flex 布局的flex-grow属性 flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 我以为能够纵向放大。经过实验和网上查找，该属性是横向放大（计算剩余宽度，不能计算剩余高度）。 这个不行就换一个。 手工计算高度 定义高度变量 export default { data() { return { newsPanelHe
uniapp计算scroll-view的剩余高度
那片枫叶~
03-01 1952
1、主要计算滚动组件的高度，避免屏幕出现滚动条，需求如下 <scroll-view :scroll-top="scrollTop" :style="{ height: scrollHeight}" scroll-y="true" enable-back-to-top > <slot></slot> </scroll-view> <script> // windowHeight ：不包含NavigationBa.
uniapp view计算剩余高度
05-19
// 计算剩余高度 let remainingHeight = winHeight - pageHeight - componentHeight; }).exec(); }).exec(); ``` 2. 在页面加载完毕后，使用 `uni.createSelectorQuery()` 方法获取当前页面的高度和所有组件的...
uniapp map设置高度为100%后,会拉伸父容器的高度
最新发布
GoppViper的博客
09-23 1152
在 UniApp 中，当给 map 组件设置高度为 100% 时确实可能会拉伸父容器的高度，这通常是因为 100% 的高度是相对于父元素的高度计算的，而如果父元素没有明确的高度定义，就可能出现这种情况。
uniapp元素高度占据剩余全部空间
weixin_39531049的博客
07-08 1388
uniapp 设置元素占用剩余高度
uni-app 自定义页面时，如何减去导航栏（状态栏）的高度
PrimaryColor
02-26 6274
html： <template> <view class="page" :style="{'padding-top': statusHeight+'px'}"> <!--此处为内容--> </view> </template> js： computed: { //状态栏高度 statusHeight(){ return uni.getSystemInfoSync().statusBarHeight...
uni-app如何动态计算窗口的剩余宽度
Gik99的博客
04-16 414
uni-app如何动态计算窗口的剩余宽度
[Uniapp]实际设备尺寸和getSystemInfo()中的windowHeight等不符
Cucci | IT猿的自白
04-13 1925
也就是说，这个实际上应该是px和point直接的一个转换，这里可以去看下详细的百度解析，手机使用的分辨率是逻辑像素，而手机屏幕有个实际像素，这个像素之间会有个转换的倍率，就是getSystemInfo().devicePixelRatio。getSystemInfo 获取到的是与WebView一致的逻辑像素，你设置的模拟器是定义的物理像素， 他们之间的换算比例为devicePixelRatio。在Uniapp中，通过获取信息得到的实际尺寸与逻辑位像素不符，导致无法正常设置尺寸。
uni-app 顶部导航栏高度计算 + 胶囊高度计算
weixin_45439379的博客
07-02 6129
uni-app 顶部导航栏高度计算 + 胶囊高度计算 文章目录uni-app 顶部导航栏高度计算 + 胶囊高度计算uni-app一、顶部导航栏高度计算二、胶囊高度计算总结 uni-app uni-app中使用自定义导航栏 page.json中设置 "navigationStyle": "custom", // 消息模块 { "path": "pages/news/news", "style": { // "navigationBarTitleText": "消息", "en
uniapp如何判断文本超出某行
csdn_chengpeng的博客
03-27 1871
此处需要获取节点元素的高度，所以必须要在mounted中去写。
uniapp实现自定义导航时 动态获取导航栏的高度 屏幕高度适配
qq_47247479的博客
03-14 5241
App.vue 配置部分 // App.vue export default { methods: { // 获取系统栏高度 setAppInfo() { let that = this; let platform = ''; uni.getSystemInfo({ success: function(e) { Vue.prototype.StatusBar = e.statusBarHeight; // Vue.prototype
uniapp h5端和app端可视区域高度不一样问题
A_Brave的博客
03-17 2862
前言 使用uniapp做一个分类列表（左右滚动布局）的时候，发现运行在h5 和app中的视口高度不一样 h5: 100vh-50px = 视口高度 // 底部tabbar栏的默认高度50px, app: 100vh就是视口的高度 总结：h5会把底部tabbar算入视口高度，app端不会。 ...
uni-app使用自定义导航，获取顶部距离，兼容各个手机型号
不懂前端的小韩的博客
07-12 4265
uni-app使用自定义导航，获取顶部距离，兼容各个手机型号
如何在uni-app中计算出微信小程序导航栏的高度
热门推荐
qq_35430000的博客
03-21 2万+
为什么要拿到导航栏的高度 拿到导航栏的高度当然是为了自定义导航栏，uniapp默认为我们提供了一个导航栏，也就是每个页面上面的标题，但如果对这个默认的导航栏不满意，我们就可以选择自定义导航栏，比如我在下面，为了满足业务需求，放了一个搜索框，取代了原先的标题栏。 不仅仅是在导航栏放放东西，如果你要导航栏自定义大背景，也需要自定义导航栏，如下(图片来源网络)： 小程序头部的几个参数 如果我们要开启页面自义定导航栏，以首页index为例，我们要在pages.json中加入以下代码，它默认是defa
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值