uniapp动态获取高度问题

最新推荐文章于 2024-12-19 10:24:12 发布
原创 最新推荐文章于 2024-12-19 10:24:12 发布 · 1.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

在uniapp中遇到动态获取元素高度的挑战，常规方法如this.$refs.xxxx.el无法获取。通过uni.getSystemInfo获取设备信息，并利用uni.createSelectorQuery结合boundingClientRect方法成功解决了这一问题。具体实现为：在success回调中，使用选择器选取元素，然后获取其高度并赋值给变量，例如：_this.ulistHeight=(data.height-70)+'px'。这种方法有效地解决了动态获取高度的需求。

记录uniapp动态获取高度问题

问题:

使用this.$refs.xxxx.el无法读取

解决方案:`

uni.getSystemInfo({
  success: function (res) {
  	// select('.类名')
    uni.createSelectorQuery().select('.element').boundingClientRect(data => {
      // data是当前元素的高度
      _this.ulistHeight = (data.height - 70) + 'px'
    }).exec();
  }
})
uniapp 获取页面高度及元素高度
weixin_46167462的博客
05-12 6383
获取页面高度及元素高度
uniapp 动态获取元素的宽高等信息
HHH917的博客
06-11 4044
前提 下面方法需要在生命周期 mounted 后进行调用。nvue 请看uniapp官网解决方式 官网例子链接：节点信息 https://uniapp.dcloud.io/api/ui/nodes-info?id=createselectorquery 完整代码示例 const query = uni.createSelectorQuery().in(this); query.select('#id').boundingClientRect(data => { console.log("得到布局位
uniapp使用swiper动态获取高度为null、切换时不能动态获取高度问题的解决
Esther_liew的博客
02-04 1343
uniapp使用swiper动态获取高度为null、切换时不能动态获取高度问题的解决
uniapp 获取自定义组件的高度
清音的博客
07-17 2381
在 UniApp 中，要获取自定义组件的高度，可以使用。执行查询操作，并在回调函数中获取自定义组件的高度。是自定义组件的类名，根据实际情况进行调整。首先，在父组件的代码中，给自定义组件添加一个。用于获取该节点的位置和尺寸信息。用于指定查询的节点为自定义组件（通过。用于选择自定义组件的类名为。
Uni-app中获取元素宽度高度的方法及注意事项
热门推荐
yytfjtyphoon的博客
11-16 2万+
Uni-app中获取元素宽度高度的方法及注意事项 1. 放弃传统dom操作节点的方法 Vue框架设计的初衷即是想摒弃传统的JS操作DOM的繁琐操作，因此极不建议在Vue框架下采用DOM节点获取元素位置的方案，当然如果想在传统Vue单文件项目中操作DOM节点也是允许的，在script元素内使用即可。 <!DOCTYPE html> <head> <meta charset="UTF-8"> <script src="写入VueJS路径"><
uni-app 动态获取元素高度等
lyxkgc的博客
09-17 4060
vue中获取DOM高度，通过ref。如下： /** * @description 计算表格高度 */ setTabelHeight() { this.$nextTick(() => { let supPX = 1; let containerHeight = this.$refs.containerRef.offsetHeight - this.getDomStyle(this.$re
Uniapp u-list-item自适应屏幕高度展示
significant_的博客
02-06 1958
Uniapp u-list所有数据自适应高度展示
uniapp获取内容高度
最新发布
TZ1284063988的博客
12-19 672
【代码】uniapp获取内容高度。
uniapp，获取头部高度
wj0712的博客
10-15 1361
头部自定义时候，设置获取安全区域，可以用 uni.getSystemInfoSync();utils文件夹下建立system.js文件代码。优化代码：建立utils文件夹。
uniapp 获取元素高度
weixin_42752532的博客
08-18 1100
<view id="target">123</view> onLoad() { const query = uni.createSelectorQuery(); query.select('#target').boundingClientRect(data => { console.log('11111111') console.log(data) }).exec(); },
uniapp 小程序 this.$ref不可用
emoji111111的博客
02-21 3251
uniapp小程序获取DOM的方法
uni-app 动态设置 swiper 的高度
username_xu的博客
10-13 4202
开发中遇到两种需要动态设置swiper高度的情况： 第一种，需要除开顶部或底部元素获取屏幕剩余高度。第二种，需要根据子元素来计算 swiper 的高度。
uniapp获取标签距离页面顶部的高度，并计算出页面的剩余高度。自适应剩余页面高度，动态设置剩余页面高度。
qq_43807473的博客
05-24 7880
uniapp获取标签距离页面顶部的高度，自适应剩余页面高度。动态设置剩余页面高度。swiper自适应剩余页面高度，scroll-view自适应剩余页面高度。
uni.createSelectorQuery()获取节点高度不准确的解决办法
AnNong
03-17 3284
uni.createSelectorQuery()获取节点高度不准确的解决办法
uni-app跨端获取组件尺寸
weixin_42998230的博客
03-02 903
uni-app跨端获取组件尺寸
uni-app小程序开发踩过的坑之ref无法获取当前元素的宽高数据
m0_64207574的博客
11-13 3717
uni-app小程序开发踩过的坑之ref无法获取当前元素的宽高数据
uniapp动态获取聊天框的高度
11-28
在UniApp中，动态获取聊天框高度通常需要通过JavaScript来操作DOM元素。你可以利用`document.querySelector`来选择聊天框元素，然后获取其`offsetHeight`属性得到当前高度。这是一个基本示例： ```javascript // 首先，假设你有一个id为chatBox的聊天框元素 var chatBox = document.getElementById('chatBox'); // 然后可以编写函数来实时获取并更新高度 function getChatBoxHeight() { var height = chatBox.offsetHeight; console.log('当前聊天框高度:', height); // 这里可以根据需要做进一步处理，比如设置外部变量、触发事件等 } // 当需要获取最新高度时，只需要调用这个函数 getChatBoxHeight(); // 如果你想在某些事件（如窗口大小变化）发生时自动更新高度，可以添加监听器 window.addEventListener('resize', function() { getChatBoxHeight(); }); ``` 注意，这只是一个基础示例，实际应用中你可能还需要处理滚动条的影响，并确保在适当的时候执行高度计算。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值