uniapp 获取 view 的宽度、高度以及上下左右左边界位置

复制代码
<view class="cont-box"></view>

/* 获取节点信息的对象 */
getElementRect() {
  const query = uni.createSelectorQuery().in(this);
  query
    .select(".cont-box")
    .boundingClientRect(res => {
      console.log(res);
      console.log(res.height); // 102.85714721679688
    })
    .exec();
}

boundingClientRect 返回的 res 结果(以像素[px]为单位)

属性 类型 说明
id String 节点的 ID
dataset Object 节点的 dataset
left Number 节点的左边界坐标
right Number 节点的右边界坐标
top Number 节点的上边界坐标
bottom Number 节点的下边界坐标
width Number 节点的宽度
height Number 节点的高度

更多可参考:uni.createSelectorQuery() | uni-app官网

相关推荐
BXCQ_xuan5 分钟前
Ngrok 配置:实现 Uniapp 前后端项目内网穿透
运维·uni-app
程序猿阿伟1 小时前
《社交应用动态表情:RN与Flutter实战解码》
javascript·flutter·react native
明似水1 小时前
Flutter 开发入门:从一个简单的计数器应用开始
前端·javascript·flutter
沐土Arvin1 小时前
前端图片上传组件实战:从动态销毁Input到全屏预览的全功能实现
开发语言·前端·javascript
Zww08912 小时前
el-dialog鼠标在遮罩层松开会意外关闭,教程图文并茂
javascript·vue.js·计算机外设
爱编程的鱼2 小时前
C#接口(Interface)全方位讲解:定义、特性、应用与实践
java·前端·c#
sunbyte2 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | 页面布局 与 Vue Router 路由配置
前端·javascript·vue.js·tailwindcss
saadiya~2 小时前
Vue 3 实现后端 Excel 文件流导出功能(Blob 下载详解)
前端·vue.js·excel
摇摇奶昔x3 小时前
webpack 学习
前端·学习·webpack