Comment définir dynamiquement la hauteur du swiper dans Uniapp

Swiper est un composant fréquemment utilisé dans de nombreux projets de développement Uniapp. Il fournit un conteneur de vue coulissante qui peut facilement implémenter des fonctions telles que le carrousel d'images et l'affichage publicitaire. Cependant, dans les projets réels, nous devons souvent définir dynamiquement la hauteur de Swiper en fonction de la hauteur du contenu pour nous adapter aux changements de contenu. Alors, comment définir dynamiquement la hauteur de Swiper dans uniapp ?

1. Calculez la hauteur de Swiper

Dans les projets réels, nous pouvons inclure le composant Swiper via un autre conteneur de vue (tel que div) pour obtenir la hauteur requise par Swiper. Ajoutez tout le contenu contenu dans Swiper au conteneur et calculez la hauteur, afin que la hauteur de Swiper puisse être définie dynamiquement pour s'adapter aux changements de contenu.

Exemple de code :

<template>
  <view>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">内容1</div>
        <div class="swiper-slide">内容2</div>
        <div class="swiper-slide">内容3</div>
      </div>
    </div>
  </view>
</template>
<script>
  export default {
    onReady() {
      this.calcHeight()
    },
    methods: {
      //计算高度
      calcHeight() {
        let _this = this
        setTimeout(() => {
          uni.createSelectorQuery()
            .in(this)
            .select('.swiper-container')
            .boundingClientRect((rect) => {
              _this.swiperHeight = rect.height
            })
            .exec()
        }, 200)
      }
    },
    data() {
      return {
        swiperHeight: 0
      }
    }
  }
</script>

<style>
  .swiper-container {
    height: {{swiperHeight}}px;
  }
</style>

Dans le code ci-dessus, nous avons d'abord créé le composant Swiper dans le modèle et enveloppé ce composant dans un conteneur div, puis ajouté un style de conteneur swiper à la classe conteneur de Swiper, utilisé pour définir la hauteur de Glisseur. Ensuite, une fois le composant Swiper chargé, nous obtenons la hauteur du conteneur et l'enregistrons dans les données du composant (c'est-à-dire la variable swiperHeight) en utilisant la fonction uni.createSelectorQuery(). Enfin, nous définissons la hauteur de Swiper via des variables dans la feuille de style pour obtenir l'effet de réglage dynamique de la hauteur.

2. Utilisez des instructions personnalisées

En plus de la méthode ci-dessus, vous pouvez également définir dynamiquement la hauteur de Swiper grâce aux instructions personnalisées fournies par uniapp. Tout d'abord, utilisez la directive v-swiper-height dans le composant et spécifiez le nom de la classe de conteneur pour laquelle la hauteur doit être calculée. Ensuite, nous définissons une fonction de mise à jour dans la directive, dans laquelle nous calculons la hauteur requise par Swiper et utilisons el.style.height pour définir la hauteur de Swiper, obtenant ainsi l'effet de définir dynamiquement la hauteur.

Exemple de code :

<template>
  <swiper class="my-swiper" v-swiper-height=".my-swiper">
    <swiper-item>内容1</swiper-item>
    <swiper-item>内容2</swiper-item>
    <swiper-item>内容3</swiper-item>
  </swiper>
</template>
<script>
  export default {
    directives: {
      //自定义指令
      swiperHeight: {
        update(el, binding) {
          uni.createSelectorQuery()
            .in(this)
            .select(binding.value)
            .boundingClientRect((rect) => {
              el.style.height = rect.height + 'px'
            })
            .exec()
        }
      }
    }
  }
</script>
<style>
  .my-swiper {
    height: auto;
  }
</style>

Dans le code ci-dessus, nous créons d'abord le composant Swiper dans le modèle et enveloppons ce composant dans une classe de conteneur personnalisée (my-swiper). Ensuite, nous utilisons la directive v-swiper-height et définissons le paramètre de nom de classe de conteneur pour lequel la hauteur doit être calculée. Ensuite, dans la directive, nous définissons une fonction de mise à jour. Lorsque la valeur liée à la hauteur du curseur change, la fonction de mise à jour est déclenchée. Dans cette fonction, nous obtenons la hauteur dans le conteneur spécifié via la fonction uni.createSelectorQuery() et la définissons sur la hauteur de Swiper.

En résumé, les deux méthodes ci-dessus peuvent définir dynamiquement la hauteur de Swiper. Elles peuvent choisir une manière plus appropriée de l'implémenter en fonction des besoins du projet réel.

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!