NodesRef.boundingClientRect

解释： 添加节点的布局位置的查询请求，相对于显示区域，以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回值是 nodesRef 对应的 selectorQuery。

方法参数

Function callback

返回值说明

返回的节点信息中，每个节点的位置用 left、right、top、bottom、width、height 字段描述。如果提供了 callback 回调函数，在执行 selectQuery 的 exec 方法后，节点信息会在 callback 中返回。

示例

在开发者工具中预览效果

扫码体验

请使用百度APP扫码

图片示例

代码示例

-

  1. <view class="wrap">    <view class="card-area">        <movable-area>            <movable-view class="target" x="{{x}}" y="{{y}}" direction="all">                Drag            </movable-view>        </movable-area>    </view>    <button type="primary" bindtap="queryNodeInfo">获取Drag的boundingClientRect的返回值</button></view>

-

  1. Page({    queryNodeInfo: function(){        swan.createSelectorQuery().select('.target').boundingClientRect(function(rect){            console.log(rect);            swan.showModal({                title: 'NodesRef.boundingClientRect的返回值',                content: JSON.stringify(rect)            });        }).exec()    }});

-

  1. movable-view {    display: flex;    align-items: center;    justify-content: center;    height: 100rpx;    width: 100rpx;    background: #38f;    color: #fff;  }movable-area {    height: 400rpx;    width: 400rpx;    background-color: #ccc;    overflow: hidden;}