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官网

相关推荐
小二·3 分钟前
Python Web 开发进阶实战:AI 原生硬件接口 —— 在 Flask + MicroPython 中构建边缘智能设备控制平台
前端·人工智能·python
李慕婉学姐6 分钟前
【开题答辩过程】以《基于uniapp的养宠互助服务程序设计与实现》为例,不知道这个选题怎么做的,不知道这个选题怎么开题答辩的可以进来看看
android·mysql·uni-app
ElasticPDF-新国产PDF编辑器9 分钟前
基于 PDF.js 的 PDF 文字编辑解决方案,纯前端 SDK,跨平台、框架无关、Web 原生
前端·javascript·pdf
带带弟弟学爬虫__10 分钟前
速通新Baidu Frida检测
前端·javascript·vue.js·python·网络爬虫
好学且牛逼的马21 分钟前
ES6 核心语法精讲
前端·ecmascript·es6
GISer_Jing22 分钟前
一次编码,七端运行:Taro多端统一架构深度解析与电商实战
前端·aigc·taro
子春一29 分钟前
Flutter for OpenHarmony:用 Flutter 构建一个数字猜谜游戏:从零开始的交互式应用开发
javascript·flutter·游戏
michael_ouyang38 分钟前
IM 消息收发流程方案选型
前端·websocket·网络协议·typescript·electron
Y淑滢潇潇41 分钟前
WEB 作业 三个练习题
前端·javascript·css3
静小谢44 分钟前
前端mock假数据工具JSON Server使用笔记
前端·笔记·json