Comment obtenir la hauteur du contenu dans Uniapp

Uniapp est un framework de développement multiplateforme basé sur Vue.js, qui peut compiler le même code dans des applications pour plusieurs plateformes. Parmi eux, pour la présentation de contenu sur différentes plates-formes, la hauteur devra peut-être être ajustée de manière dynamique.

Dans Uniapp, vous pouvez obtenir la hauteur du contenu grâce aux méthodes suivantes :

1. Utilisez la méthode uni.createSelectorQuery()

La méthode uni.createSelectorQuery() est l'une des API d'Uniapp pour obtenir des informations sur les composants . Vous pouvez obtenir diverses informations sur le composant, notamment la largeur, la hauteur, les informations de position, etc. Après avoir obtenu les informations sur le composant, vous pouvez utiliser la fonction de rappel pour effectuer des opérations.

Par exemple, si vous avez besoin d'obtenir les informations de hauteur d'un composant de vue, vous pouvez procéder comme suit :

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

Parmi eux, le paramètre '.view-class' est le nom de style du composant de vue, et le . La méthodeboundingClientRect() peut obtenir les informations de position et de taille du composant, la fonction de rappel (rect) est les informations obtenues relatives au composant.

2. Utilisation de l'API uni@v3

Dans la version Uniapp v3, l'API a été considérablement mise à niveau et modifiée, y compris l'ajout de nouvelles API.

En utilisant l'API uni@v3, vous pouvez obtenir directement les informations sur le nœud dans la page et vous pouvez utiliser la syntaxe d'attente pour implémenter des opérations asynchrones.

Pour obtenir la hauteur dans l'API uni@v3, vous pouvez procéder comme suit :

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

L'instruction query.select('.view-class').boundingClientRect() sélectionne le composant et obtient sa hauteur, et utilise Promise pour rendez-le asynchrone L'opération attend que la hauteur soit obtenue avant de continuer à s'exécuter. Les résultats de la requête sont enregistrés dans res et les informations sur la hauteur sont obtenues via res[0].height.

Résumé :

Grâce aux deux méthodes ci-dessus, nous pouvons obtenir les informations de hauteur du composant dans Uniapp, et l'ajuster et l'utiliser selon les besoins. Dans le développement réel, vous devez étudier et maîtriser en profondeur l'API et les connaissances associées dans Uniapp pour mieux les appliquer au développement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!