Obtain the position information of the node in uniapp (height, width, left, right, top, bottom, etc.)

Foreword:

In uniapp, we sometimes use operations such as obtaining node information, so we can check it according to official documents, and we can use uni.createSelectorQuery() to operate

1. Introduction to uni.createSelectorQuery()

Returns a SelectorQuery object instance. You can use methods such as select to select nodes on this instance, and methods such as boundingClientRect to select the information to be queried.

Tips:

• Using uni.createSelectorQuery() needs to be called after the life cycle is mounted.

• The selectorQuery.in method needs to be used by default.

Returned parameters

callback return parameters:

Attributes	type	illustrate
id	String	ID of the node
dataset	Object	node's dataset
left	Number	Node's left border coordinates
right	Number	The coordinates of the right border of the node
top	Number	Coordinates of the upper boundary of the node
bottom	Number	Node's lower boundary coordinates
width	Number	node width
height	Number	node height

2. Example of use

code:

onReady() {
            let view = uni.createSelectorQuery().select(".home-data");
            view.boundingClientRect(data=>{
                console.log("信息",data);
                this.clientHeight = data.height
            }).exec();
        },

Information obtained: