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

相关推荐
JSMSEMI1110 分钟前
JSM12N60C 600V N沟道增强型功率MOSFET
开发语言·javascript·ecmascript
ihuyigui12 分钟前
国际商超零售短信接口
大数据·前端·后端·架构·零售
Yan-英杰12 分钟前
从零玩转搜索引擎 API: 多引擎整合实战
服务器·前端·microsoft
Spider_Man17 分钟前
Claude Code Hooks:给 AI 助手装上"安全带"
前端·ai编程·claude
lichenyang45322 分钟前
HarmonyOS 6.0 ArkUI 循环渲染:ForEach、LazyForEach 和 Repeat 到底怎么选?
前端
Captaincc37 分钟前
置身钉内:一个 AI 办公产品的理想、失焦与组织困境
前端·程序员
零陵上将军_xdr1 小时前
后端转全栈学习-Day6-JavaScript 基础-4
前端·javascript·学习
川冰ICE1 小时前
JavaScript实战②|电商网站交互效果,轮播图与购物车
开发语言·javascript·交互
凌云拓界1 小时前
状态机与思考循环 ——CogitoAgent开发实战(一)
javascript·人工智能·架构·node.js·设计规范
sugar__salt1 小时前
Bun 新一代 JavaScript/TypeScript 运行时:从入门到实战
开发语言·javascript·typescript