NodesRef.boundingClientRect

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

方法参数

Function callback

返回值说明

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

示例

在开发者工具中预览效果

扫码体验

请使用百度APP扫码

图片示例

代码示例

• 在 swan 文件中

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

• 在 js 文件中

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

• 在 css 文件中

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;
}