Comment définir la hauteur du swiper dans Uniapp

Dans le développement d'applications mobiles, les carrousels sont l'un des composants les plus courants et l'un des éléments les plus courants dans les interfaces utilisateur. Lorsque vous utilisez Uniapp pour développer des applications mobiles, vous pouvez utiliser le composant swiper pour implémenter des graphiques carrousel. Cependant, il arrive parfois que dans certains cas, la hauteur du composant swiper ne puisse pas être adaptée automatiquement, ce qui entraîne un affichage incomplet du carrousel. En réponse à cette situation, cet article explique comment résoudre ce problème en définissant la hauteur du composant swiper dans uniapp.

1. Utilisation de base du composant swiper

Avant de comprendre comment définir la hauteur du composant swiper, passons en revue l'utilisation de base du composant swiper. Le composant swiper est un composant carrousel dans uniapp, qui peut réaliser un carrousel automatique et une commutation manuelle entre plusieurs images. L'utilisation spécifique est la suivante :

1. Introduire le composant swiper

Introduire le composant swiper dans la page, par exemple dans le fichier index.vue :

<template>
  <view>
    <swiper>
      <swiper-item>
        <image src="xxx"></image>
      </swiper-item>
      <swiper-item>
        <image src="xxx"></image>
      </swiper-item>
      ...
    </swiper>
  </view>
</template>

<script>
  export default {
    name: 'Index'
    // ...
  }
</script>

2. Configurer les paramètres du composant swiper

Le swiper Le composant prend en charge une variété de paramètres de configuration, y compris l'intervalle de rotation automatique, l'affichage ou non des points indicateurs, la lecture en boucle, etc. Dans le code ci-dessus, nous avons simplement utilisé la configuration par défaut. Si vous avez besoin de personnaliser les paramètres de configuration, vous pouvez ajouter des attributs sur le composant swiper, par exemple :

<swiper autoplay="{{true}}" interval="{{5000}}" loop="{{true}}">

De cette façon, vous pouvez obtenir un carrousel automatique et le temps d'affichage de chaque image. est de 5 secondes, lecture en boucle et autres fonctions.

2. Définissez la hauteur du composant swiper

Lors de l'utilisation du composant swiper, si vous ne définissez pas la hauteur, sa hauteur sera par défaut à 0, ce qui empêchera l'affichage de l'image du carrousel. Normalement, nous pouvons utiliser la disposition flexible pour rendre la hauteur du composant swiper adaptative, par exemple :

<template>
  <view class="container">
    <swiper class="swiper">
      ...
    </swiper>
  </view>
</template>

<style>
  .container {
    display: flex;
    justify-content: center;
    align-item: center;
    height: 100%; /* 设置容器的高度为100% */
  }
  .swiper {
    width: 100%;
    height: 100%;
  }
</style>

En réglant la hauteur du composant swiper à 100 %, laissez la hauteur du composant swiper s'adapter à la hauteur du conteneur parent. , réalisant ainsi un affichage normal de graphique carrousel.

Il convient de noter que dans certains cas, la méthode ci-dessus peut ne pas résoudre le problème. Par exemple, dans certaines zones de la page, d'autres composants occupent la hauteur, ce qui empêche l'affichage complet du composant swiper. À ce stade, vous pouvez envisager d’utiliser la méthode de calcul de la hauteur du swiper pour résoudre le problème.

1. Utilisez la fonction onReady

Dans la fonction de cycle de vie du composant Vue, la fonction onReady est une fonction qui est exécutée immédiatement après le rendu du composant. Par conséquent, nous pouvons calculer la hauteur du composant swiper dans la fonction onReady et attribuer la hauteur calculée à l'attribut style du composant swiper. Par exemple :

<template>
  <view>
    <swiper :style="swiperStyle">
      ...
    </swiper>
  </view>
</template>

<script>
  export default {
    name: 'Index',
    data () {
      return {
        swiperHeight: 0
      }
    },
    computed: {
      swiperStyle () {
        return {
          height: this.swiperHeight + 'px'
        }
      }
    },
    onReady () {
      // 计算swiper组件的高度
      const query = uni.createSelectorQuery().in(this)
      query.select('.swiper').boundingClientRect(data => {
        this.swiperHeight = data.height
      }).exec()
    }
  }
</script>

Dans le code ci-dessus, nous utilisons la fonction createSelectorQuery fournie par uniapp pour obtenir la hauteur du composant swiper. Dans la fonction onReady, nous calculons la hauteur du composant swiper et attribuons la hauteur calculée à l'attribut de style du composant swiper, réalisant ainsi la hauteur adaptative du composant swiper.

2. Utilisez la fonction d'écoute de la montre

En plus d'utiliser la fonction onReady, vous pouvez également utiliser la fonction de montre dans le composant Vue pour surveiller les changements de hauteur du composant swiper et mettre à jour dynamiquement le style du composant swiper lorsque le changements de hauteur. Par exemple :

<template>
  <view>
    <swiper :style="swiperStyle">
      ...
    </swiper>
  </view>
</template>

<script>
  export default {
    name: 'Index',
    data () {
      return {
        swiperHeight: 0
      }
    },
    computed: {
      swiperStyle () {
        return {
          height: this.swiperHeight + 'px'
        }
      }
    },
    watch: {
      swiperHeight (val) {
        this.$nextTick(() => {
          this.$refs['swiper'].$el.style.height = val + 'px'
        })
      }
    },
    methods: {
      getSwiperHeight () {
        const query = uni.createSelectorQuery().in(this)
        query.select('.swiper').boundingClientRect(data => {
          this.swiperHeight = data.height
        }).exec()
      }
    },
    mounted () {
      this.getSwiperHeight()
      uni.$on('resize', this.getSwiperHeight)
    },
    beforeDestroy () {
      uni.$off('resize', this.getSwiperHeight)
    }
  }
</script>

Dans le code ci-dessus, nous avons défini une variable swiperHeight pour enregistrer la hauteur du composant swiper. Dans la fonction watch, nous surveillons les modifications de la variable swiperHeight et utilisons la fonction $nextTick pour actualiser le style du composant swiper lorsqu'il change afin d'obtenir des mises à jour dynamiques de la hauteur. Afin d'obtenir la hauteur du composant swiper, nous utilisons la fonction getSwiperHeight, et une fois la page montée et avant la destruction du composant, nous appelons les fonctions $on et $off fournies par uniapp pour surveiller et libérer l'événement de redimensionnement pour mettre à jour dynamiquement le swiper lorsque la taille de la fenêtre change.

3. Résumé

Cet article explique comment définir la hauteur du composant swiper dans uniapp. Si vous constatez que la hauteur ne peut pas être adaptée lors de l'utilisation du composant swiper, vous pouvez essayer d'utiliser la disposition flexible, la fonction onReady ou la fonction watch pour résoudre le problème. L'utilisation de ces méthodes est relativement simple et ne nécessite que quelques connaissances de base des fonctions de cycle de vie et de la disposition des styles de Vue. J'espère que les méthodes présentées dans cet article vous seront utiles dans le développement d'Uniapp.

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!