NodesRef.boundingClientRect

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

# 方法参数

Function callback

# 返回值说明

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

参数 类型 说明
left Nunber 节点左边界坐标
right Nunber 节点右边界坐标
top Nunber 节点上边界坐标
bottom Nunber 节点下边界坐标
width Nunber 节点宽度
height Nunber 节点高度

# 示例

在开发者工具中预览效果

# 扫码体验

请使用百度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;
}