How to get the height of the content in uniapp

Uniapp is a cross-platform development framework based on Vue.js, which can compile the same code into applications for multiple platforms. Among them, for content presentation on different platforms, the height may need to be dynamically adjusted.

In Uniapp, you can get the height of the content through the following methods:

1. Use the uni.createSelectorQuery() method

uni.createSelectorQuery() method It is one of the APIs in Uniapp to obtain component information. It can obtain various information about the component, including width, height, position information, etc. After obtaining the component information, you can use the callback function to perform operations.

For example, if you need to obtain the height information of a view component, you can proceed as follows:

uni.createSelectorQuery().select('.view-class').boundingClientRect((rect)=>{
    console.log(rect.height);
}).exec()

Among them, the parameter '.view-class' is the style name of the view component, . The boundingClientRect() method can obtain the position and size information of the component, and the callback function (rect) is the obtained component-related information.

2. Using uni@v3 API

In the Uniapp v3 version, the API has been greatly upgraded and changed, including the addition of new APIs.

By using the uni@v3 API, you can directly obtain the node information in the page, and you can use await syntax to implement asynchronous operations.

Regarding obtaining the height in the uni@v3 API, you can proceed as follows:

async function getHeight() {
    const query = uni.createSelectorQuery();
    await new Promise(resolve => {
        query.select('.view-class').boundingClientRect();
        query.exec(res => {
            console.log(res[0].height);
            resolve();
        });
    });
}

The query.select('.view-class').boundingClientRect() statement selects the component and obtains For its height, use Promise to let the asynchronous operation wait for the height to be obtained before continuing to execute. The query results are saved in res, and the height information is obtained through res[0].height.

Summary:

Through the above two methods, we can obtain the height information of the component in Uniapp, and adjust and operate it as needed. In actual development, you need to deeply study and master the API and related knowledge in Uniapp to better apply it in development.

The above is the detailed content of How to get the height of the content in uniapp. For more information, please follow other related articles on the PHP Chinese website!