So legen Sie die Höhe des Swipers in Uniapp dynamisch fest

Swiper ist eine häufig verwendete Komponente in vielen Uniapp-Entwicklungsprojekten. Es bietet einen verschiebbaren Ansichtscontainer, der Funktionen wie Bildkarussell und Werbeanzeige problemlos implementieren kann. In tatsächlichen Projekten müssen wir jedoch häufig die Höhe von Swiper dynamisch basierend auf der Höhe des Inhalts festlegen, um uns an Inhaltsänderungen anzupassen. Wie kann man also die Höhe von Swiper in Uniapp dynamisch festlegen?

1. Berechnen Sie die Höhe von Swiper

In tatsächlichen Projekten können wir die Swiper-Komponente über einen anderen Ansichtscontainer (z. B. div) einbinden, um die von Swiper benötigte Höhe zu erhalten. Fügen Sie den gesamten in Swiper enthaltenen Inhalt zum Container hinzu und berechnen Sie die Höhe, sodass die Höhe von Swiper dynamisch angepasst werden kann, um sich an Inhaltsänderungen anzupassen.

Beispielcode:

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

Im obigen Code haben wir zuerst die Swiper-Komponente in der Vorlage erstellt und diese Komponente in einen Div-Container eingeschlossen und dann der Containerklasse von Swiper einen Swiper-Container-Stil hinzugefügt, der zum Festlegen der Höhe von verwendet wird Swiper. Nachdem die Swiper-Komponente geladen wurde, ermitteln wir als Nächstes die Höhe des Containers und speichern sie mithilfe der Funktion uni.createSelectorQuery() in den Daten der Komponente (d. h. in der Variable swiperHeight). Schließlich legen wir die Höhe von Swiper über Variablen im Stylesheet fest, um den Effekt einer dynamischen Höheneinstellung zu erzielen.

2. Benutzerdefinierte Anweisungen verwenden

Zusätzlich zur oben genannten Methode können Sie die Höhe von Swiper auch dynamisch über die von uniapp bereitgestellten benutzerdefinierten Anweisungen festlegen. Verwenden Sie zunächst die Direktive v-swiper-height in der Komponente und geben Sie den Namen der Containerklasse an, für die die Höhe berechnet werden muss. Anschließend definieren wir in der Direktive eine Aktualisierungsfunktion, in der wir die von Swiper benötigte Höhe berechnen und mit el.style.height die Höhe von Swiper festlegen, wodurch der Effekt einer dynamischen Höheneinstellung erzielt wird.

Beispielcode:

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

Im obigen Code erstellen wir zunächst die Swiper-Komponente in der Vorlage und packen diese Komponente in eine benutzerdefinierte Containerklasse (my-swiper). Dann verwenden wir die Direktive v-swiper-height und legen den Namensparameter der Containerklasse fest, für den die Höhe berechnet werden muss. Als nächstes definieren wir in der Direktive eine Update-Funktion. Wenn sich der an die Swiper-Höhe gebundene Wert ändert, wird die Update-Funktion ausgelöst. In dieser Funktion erhalten wir die Höhe im angegebenen Container über die Funktion uni.createSelectorQuery() und setzen sie auf die Höhe von Swiper.

Zusammenfassend lässt sich sagen, dass die beiden oben genannten Methoden die Höhe von Swiper dynamisch festlegen können. Sie können eine geeignetere Methode zur Implementierung entsprechend den Anforderungen des tatsächlichen Projekts auswählen.

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