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

相关推荐
ZoeLandia5 分钟前
TypeScript 04:类型断言与类型守卫
开发语言·前端·typescript
guzicheng19908 分钟前
webpack 安装笔记:全局 vs 本地,以及一个 PATH 环境变量的坑
前端·webpack
西索斯coding15 分钟前
Claude Code 工具调用返回空怎么办?claude-opus-5.5 的 input_schema 校验踩坑记录与修复方案
服务器·前端·javascript·ai
疯狂敲代码的老刘16 分钟前
MarvellousSuspender浏览器扩展:1.4K星开源标签页冻结神器,Chrome吃内存终结者的干净复活版
前端·chrome
码上上班17 分钟前
shell 脚本知识点总结
前端·chrome
程序员Sunday18 分钟前
Flex 和 Grid 有什么区别?一维布局、二维布局怎么选?
前端·css·面试
Jlzn888820 分钟前
华南PACK线自动化率怎么统计才靠谱
前端·javascript·自动化
蒿豪郝灬号37 分钟前
UniApp接入鸿蒙版阿里百川
华为·uni-app·harmonyos
拖孩40 分钟前
AI 时代,个人开发者到底能不能靠一个小程序赚到钱
前端·后端·微信小程序
Hilaku42 分钟前
ERP选型时不问MCP,等于默认三年后再付一次集成费!
前端·javascript·程序员