So legen Sie die Höhe für den Swiper in Uniapp fest

Bei der Entwicklung mobiler Anwendungen sind Karussells eine der häufigsten Komponenten und eines der häufigsten Elemente in Benutzeroberflächen. Wenn Sie uniapp zum Entwickeln mobiler Anwendungen verwenden, können Sie die Swiper-Komponente zum Implementieren von Karusselldiagrammen verwenden. Allerdings kommt es manchmal vor, dass die Höhe der Swiper-Komponente nicht automatisch angepasst werden kann, was zu einer unvollständigen Anzeige des Karussells führt. Als Reaktion auf diese Situation wird in diesem Artikel erläutert, wie Sie dieses Problem lösen können, indem Sie die Höhe der Swiper-Komponente in Uniapp festlegen.

1. Grundlegende Verwendung der Swiper-Komponente

Bevor wir verstehen, wie die Höhe der Swiper-Komponente eingestellt wird, schauen wir uns die grundlegende Verwendung der Swiper-Komponente an. Die Swiper-Komponente ist eine Karussellkomponente in Uniapp, die ein automatisches Karussell und einen manuellen Wechsel zwischen mehreren Bildern realisieren kann. Die spezifische Verwendung ist wie folgt:

1. Führen Sie die Swiper-Komponente ein.

Fügen Sie die Swiper-Komponente in die Seite ein, beispielsweise in der Datei 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. Konfigurieren Sie die Parameter der Swiper-Komponente.

Der Swiper Die Komponente unterstützt mehrere Konfigurationsparameter, einschließlich des automatischen Rotationsintervalls, ob Anzeigepunkte angezeigt werden sollen, ob die Wiedergabe wiederholt werden soll usw. Im obigen Code haben wir nur die Standardkonfiguration verwendet. Wenn Sie die Konfigurationsparameter anpassen müssen, können Sie der Swiper-Komponente Attribute hinzufügen, zum Beispiel:

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

Auf diese Weise können Sie ein automatisches Karussell und die Anzeigezeit jedes Bildes erreichen beträgt 5 Sekunden, Loop-Wiedergabe und andere Funktionen.

2. Stellen Sie die Höhe der Swiper-Komponente ein

Wenn Sie die Höhe der Swiper-Komponente nicht festlegen, wird deren Höhe standardmäßig auf 0 gesetzt, was dazu führt, dass das Karussellbild nicht angezeigt werden kann. Normalerweise können wir das Flex-Layout verwenden, um die Höhe der Swiper-Komponente adaptiv zu gestalten, zum Beispiel:

<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>

Indem wir die Höhe der Swiper-Komponente auf 100 % setzen, passen wir die Höhe der Swiper-Komponente an die Höhe des übergeordneten Containers an Dadurch wird eine normale Karusselldiagramm-Anzeige realisiert.

Es ist zu beachten, dass die oben beschriebene Methode das Problem in einigen Fällen möglicherweise nicht löst. In einigen Bereichen der Seite nehmen beispielsweise andere Komponenten die Höhe ein, was dazu führt, dass die Swiper-Komponente nicht vollständig angezeigt wird. Zu diesem Zeitpunkt können Sie erwägen, die Methode zur Berechnung der Wischerhöhe zu verwenden, um das Problem zu lösen.

1. Verwenden Sie die onReady-Funktion

In der Lebenszyklusfunktion der Vue-Komponente ist die onReady-Funktion eine Funktion, die unmittelbar nach dem Rendern der Komponente ausgeführt wird. Daher können wir die Höhe der Swiper-Komponente in der onReady-Funktion berechnen und die berechnete Höhe dem Stilattribut der Swiper-Komponente zuweisen. Beispiel:

<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>

Im obigen Code verwenden wir die von uniapp bereitgestellte Funktion createSelectorQuery, um die Höhe der Swiper-Komponente zu ermitteln. In der onReady-Funktion berechnen wir die Höhe der Swiper-Komponente und weisen die berechnete Höhe dem Stilattribut der Swiper-Komponente zu, wodurch die adaptive Höhe der Swiper-Komponente realisiert wird.

2. Verwenden Sie die Watch-Listening-Funktion

Zusätzlich zur Verwendung der onReady-Funktion können Sie auch die Watch-Funktion in der Vue-Komponente verwenden, um Änderungen in der Höhe der Swiper-Komponente zu überwachen und den Stil der Swiper-Komponente dynamisch zu aktualisieren, wenn die Höhenveränderungen. Zum Beispiel:

<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>

Im obigen Code definieren wir eine swiperHeight-Variable, um die Höhe der Swiper-Komponente zu speichern. In der Watch-Funktion überwachen wir Änderungen in der Variablen swiperHeight und verwenden die Funktion $nextTick, um den Stil der Swiper-Komponente zu aktualisieren, wenn sie sich ändert, um dynamische Aktualisierungen der Höhe zu erreichen. Um die Höhe der Swiper-Komponente zu erhalten, verwenden wir die Funktion getSwiperHeight. Nachdem die Seite gemountet wurde und bevor die Komponente zerstört wird, rufen wir die von uniapp bereitgestellten Funktionen $on und $off auf, um das Größenänderungsereignis zu überwachen und freizugeben Aktualisieren Sie den Swiper dynamisch, wenn sich die Fenstergröße ändert.

3. Zusammenfassung

In diesem Artikel erfahren Sie, wie Sie die Höhe für die Swiper-Komponente in Uniapp festlegen. Wenn Sie feststellen, dass die Höhe bei Verwendung der Swiper-Komponente nicht angepasst werden kann, können Sie versuchen, das Problem mit Flex Layout, OnReady-Funktion oder Watch-Funktion zu lösen. Die Verwendung dieser Methoden ist relativ einfach und erfordert nur einige Grundkenntnisse der Vue-Lebenszyklusfunktionen und des Stillayouts. Ich hoffe, dass die in diesem Artikel vorgestellten Methoden Ihnen bei der Uniapp-Entwicklung hilfreich sein werden.

Das obige ist der detaillierte Inhalt vonSo legen Sie die Höhe für den Swiper in Uniapp fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!