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

相关推荐
前端付豪5 分钟前
Prompt Playground(实现提示词工作台)
前端·人工智能·后端
竹林8186 分钟前
在NFT项目中集成IPFS:从Pinata上传到前端展示的完整实战与踩坑
前端·javascript
取名不易6 分钟前
canves实现画布
前端
AlkaidSTART9 分钟前
深入浅出 React Hooks 原理:从 Fiber 的 memoizedState 链表讲到 updateQueue 调度
前端
一颗小行星11 分钟前
Harness Engineering 前端开发的下一个阶段
前端·ai编程
踩着两条虫24 分钟前
重磅!这款AI低代码平台火了:拖拽生成应用,一键输出Web/H5/UniApp
前端·低代码·ai编程
我命由我1234525 分钟前
Vite - Vite 最小项目
服务器·前端·javascript·react.js·ecmascript·html5·js
布局呆星25 分钟前
Vue3 | 事件绑定与双向数据绑定
前端·javascript·vue.js
Hilaku27 分钟前
前端资质越高,越来越不敢随便升级框架?
前端·javascript·架构
自然常数e30 分钟前
预处理讲解
java·linux·c语言·前端·visual studio