vue3+uniapp 获取boundingClientRect信息

最新推荐文章于 2025-04-17 14:36:37 发布

秀风隘口

最新推荐文章于 2025-04-17 14:36:37 发布

阅读量400

点赞数 3

文章标签： uni-app vue.js javascript

本文链接：https://blog.youkuaiyun.com/qq_38727224/article/details/142483510

版权

import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance(); 

uni.createSelectorQuery().in(proxy).select("#aiBlock").boundingClientRect((res)=> {

        console.log(res)

}).exec()

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

秀风隘口

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

UniApp + Vue3开发中的坑：无法获取到dom元素的排查过程无法直接修改style样式的坑

代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。

12-21

471

在开发项目时，我遇到了一个令人困惑的问题。原本我以为ref获取到的 DOM 元素可以直接修改它的style，比如width。然而，我发现某些元素的样式并没有生效，经过一番排查，我才发现这个问题并非我想象中的那么简单。

uniapp 获取页面高度及元素高度

weixin_46167462的博客

05-12

5938

获取页面高度及元素高度

1 条评论您还未登录，请先登录后发表或查看评论

uniapp开发遇到的小需求

qq_41306452的博客

07-28

490

uniapp开发遇到的小需求。

javascript 获取元素位置的快速方法 getBoundingClientRect()

10-29

有一种快速获得网页元素的位置。那就是使用getBoundingClientRect()方法。

基于uniapp vue3 的滑动抢单组件

m0_49083276的博客

02-10

413

通过在onMounted获取movable-area与movable-view实例，计算出可滑动的距离。

uniapp之boundingClientRect注意事项

钬码狼酷的博客

04-01

7345

uniapp中boundingClientRect使用注意事项，用法、填坑等

Vue 3获取DOM元素的大小以及相对于视口的位置的getBoundingClientRect属性

MtangEr的博客

06-06

3385

Vue 3获取DOM元素的大小以及相对于视口的位置的getBoundingClientRect属性。监听元素右键事件

uniapp使用createSelectorQuery,boundingClientRect获取宽度和高度不准确的可用的解决方案

最新发布

04-17

489

uniapp使用createSelectorQuery,boundingClientRect获取宽度和高度不准确的可用的解决方案，正常来说，使用下面的代码是可以正确获得宽高的，但是里面含有图片，在图片没有加载完的情况下，我们可以想像一下，计算出来的结果肯定是不对的。而且我也在网上找了不少的解决方案。如下图，我想要计算box-title和box-bottom的高度，然后再确认中心的可滚动部分，其中头部和底部都有id="box-title"和id="box-bottom"的id的两个盒子。

vue3动态获取数据时使用getboundingclientrect()无效

m0_61280181的博客

04-01

2060

在vue3中，当数据重数据库查出渲染到页面上时想要获取相关html标签位置信息时报错：TypeError: Cannot read properties of null (reading 'getBoundingClientRect'使用document.getElementById("DivShow")调用getBoundingClientRect()

uniapp + vue 定位聊天最新消息实现滚动条一直在元素的最底部

精灵码农

12-13

2936

使用 scroll-view 配合uni.createSelectorQuery() 以及boundingClientRect()即可实现； <scroll-view id="scrollview" class="chat-window" scroll-y="true" :style="{height: style.contentViewHeight + 'px'}" :scrol...

vue3 uniapp获取dom元素

10-12

在Vue3中，可以使用`ref`来获取DOM元素。在Uniapp中，可以在`onReady`生命周期函数中使用`uni.createSelectorQuery()`来获取DOM元素，具体代码如下： ``` 这是一个DOM元素 export default { onReady() { uni...

uniapp获取元素距离顶部的距离

seimeii的博客

03-01

6246

var that=this; const query = uni.createSelectorQuery().in(that); query.select('元素').boundingClientRect(data => { console.log(data) }).exec();

getBoundingClientRect() 来获取页面元素的位置

笨鸟快飞的专栏

06-04

807

document.documentElement.getBoundingClientRect 下面这是MSDN的解释：SyntaxoRect = object.getBoundingClientRect()Return ValueReturns a TextRectangle object. Each rectangle has four integer properties (top, left

uniapp自定义顶部导航并解决打包成apk后getMenuButtonBoundingClientRect方法失效问题

请叫我欧皇！的博客

01-05

1766

需求：要在app上的顶部导航提示哪里添加一些东西进去，用uniapp自带的肯定不行啊，所以自定义了所有的页面的顶部导航，之后自定义后用手机调试发现 uni.getMenuButtonBoundingClientRect()这个方法的top获取不到....网上找了很多种方法才实现，记录一下。

获取元素与页面距离的方法(getBoundingClientRect)

hzxOnlineOk的博客

01-04

609

获取元素与页面距离的方法(getBoundingClientRect)，getBoundingClientRect就是“得到客户端矩形边界”的意思，或者使用邪恶记法记住“割(g)逼(b)艹(c)软(r)”。

VUE-getBoundingClientRect()

LzzMandy的博客

07-03

3530

返回元素的大小及其相对于窗口或者文档的位置

uniapp自定义导航栏 | uni.getSystemInfo() | wx.getMenuButtonBoundingClientRect()

weixin_51364974的博客

09-03

2313

一.自定义导航栏的区域上面整体就是自定义导航栏的区域(包括状态栏) 胶囊接口 /*获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点 */ wx.getMenuButtonBoundingClientRect(); /* 返回值：width、height、top、right、bottom、left*/ 状态栏接口 wx.getSystemInfo({ success: e => { console.log(e.statusBarHeight);/*状态栏高度

修复vue3项目中，使用 antv x6 dnd拖拽插件在将节点拖动到画布上是报elem.getBoundingClientRect is not a function错误的问题

专注于编程智能体和AI原生开发领域的分享

05-13

992

在初始化dnd插件的时候，将dndContainer属性去掉就可以了。估计是我dndContainer取值不对造成的。欢迎关注公众号：清晰编程，获取更多精彩内容。

vue监听滚动事件实现元素吸顶-getBoundingClientRect()

weixin_42863883的博客

08-22

2056

需求顶部有banner，当屏幕向上滑动超出banner高度时出现导航思路监听scroll，通过判断当前元素与顶部的距离，来控制导航的显隐实现 mounted (){ // 绑定监听事件 window.addEventListener('scroll', this.handleScroll, true) }, method...