Comment obtenir la hauteur d'un élément dans Uniapp

Dans le processus de développement de projets à l'aide d'uniapp, nous avons souvent besoin d'obtenir la hauteur des éléments afin d'effectuer les opérations et la disposition correspondantes, telles que le calcul dynamique de la hauteur des éléments de la liste, la définition de la hauteur minimale des composants, etc. Alors, comment obtenir la hauteur de l’élément dans uniapp ?

Méthode 1 : uni.createComponent()

Dans uniapp, utilisez uni.createComponent() pour créer dynamiquement des composants personnalisés. Dans un composant personnalisé, nous pouvons utiliser la méthode uni.createSelectorQuery() dans la fonction de cycle de vie du composant personnalisé pour obtenir les informations du nœud de l'élément, y compris la hauteur, la largeur, etc.

Prenons l'exemple de l'obtention de la hauteur d'un élément div :

Dans la fonction de cycle de vie créée du composant personnalisé, vous pouvez utiliser la méthode uni.createSelectorQuery() pour obtenir les informations de l'élément. Le code spécifique est le suivant :

<template>
  <div class="component">
    <div class="content" ref="content">
      我是一个自定义组件
    </div>
  </div>
</template>

<script>
  export default {
    created () {
      // 获取元素的信息
      uni.createSelectorQuery().in(this).select('.content').boundingClientRect((rect) => {
        console.log('元素高度为：' + rect.height)
      }).exec()
    }
  }
</script>

<style>
  .component {
    width: 100%;
    height: 100%;
  }
  
  .content {
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style>

Dans le code ci-dessus, utilisez ref pour obtenir la référence à l'élément div, puis utilisez la méthode uni.createSelectorQuery() dans la fonction de cycle de vie créée pour interroger les informations de l'élément. Parmi eux, select('.content') signifie interroger l'élément dont la classe est content, et la méthodeboundingClientRect() signifie interroger les informations de taille de l'élément. Le rect renvoyé dans la fonction de rappel est un objet contenant la position, taille et autres informations de l’élément.

Méthode 2 : uni.pageScrollTo()

Dans certains cas, nous devons obtenir la hauteur d'un élément sur la page, ce qui peut être obtenu en utilisant la méthode uni.pageScrollTo(). Le code spécifique est le suivant :

<template>
  <div class="component">
    <div class="content" ref="content">
      我是一个自定义组件
    </div>
  </div>
</template>

<script>
  export default {
    mounted () {
      // 获取页面中元素的高度
      uni.pageScrollTo({
        selector: '.content',
        success: (res) => {
          console.log('元素高度为：' + res[0].top)
        }
      })
    }
  }
</script>

<style>
  .component {
    width: 100%;
    height: 100%;
  }
  
  .content {
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style>

Dans le code ci-dessus, la fonction de cycle de vie montée est utilisée et la méthode uni.pageScrollTo() est utilisée une fois le rendu de la page terminé. sélecteur : '.content' signifie interroger des éléments avec un contenu de classe. Le res dans la fonction de rappel de réussite peut obtenir les informations sur l'élément, où res[0].top signifie la distance entre l'élément et le haut de la page.

Résumé :

Les deux méthodes ci-dessus, la première convient pour obtenir la hauteur des éléments dans des composants personnalisés, et la seconde convient pour obtenir la hauteur d'un élément sur la page. Les deux ont leurs propres avantages et inconvénients, et vous pouvez choisir en fonction de scénarios spécifiques. Quelle que soit la méthode utilisée, vous devez faire attention à ajouter la fonction de rappel des informations de taille dans la fonction ou la méthode de cycle de vie correspondante afin d'obtenir la hauteur et d'autres informations de l'élément.

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!