Uniapp legt die Scrollhöhe fest

Uniapp ist ein plattformübergreifendes Anwendungsentwicklungstool, das auf dem Vue.js-Framework basiert und schnell Anwendungen für mehrere Plattformen (iOS, Android, H5) erstellen kann. Bei der Entwicklung mit Uniapp müssen Sie häufig die Bildlaufhöhe festlegen. Daher wird in diesem Artikel erläutert, wie Sie die Bildlaufhöhe in Uniapp festlegen.

1. Stellen Sie die Scrollhöhe der Seite ein.

1. Fügen Sie in der Vorlage ein Scroll-View-Tag hinzu.

Beim Schreiben die Seite Dabei können wir der Vorlage ein Scroll-View-Tag hinzufügen, um das Scrollen der Seite zu implementieren. Gleichzeitig müssen wir auch die Höhe der Scroll-Ansicht festlegen, damit die Seite gescrollt werden kann.

Fügen Sie beispielsweise den folgenden Code zur Vorlage hinzu:

<template>
  <scroll-view style="height: 1000rpx;">
    <!-- 页面内容 -->
  </scroll-view>
</template>

In diesem Beispiel legen wir die Höhe der Scroll-Ansicht auf 1000 rpx fest.

2. Berechnen Sie die Bildlaufhöhe in der Seitenlebenszyklus-Hook-Funktion

Zusätzlich zum Festlegen der Höhe der Bildlaufansicht in der Vorlage, Wir können die Scrollhöhe auch in der Lebenszyklus-Hook-Funktion der Seite berechnen.

Zum Beispiel können wir in der onLoad-Hook-Funktion der Seite die Bildlaufhöhe wie folgt berechnen:

<template>
  <scroll-view :style="{height: scrollHeight + 'rpx'}">
    <!-- 页面内容 -->
  </scroll-view>
</template>

<script>
  export default {
    data() {
      return {
        scrollHeight: 0
      };
    },
    onLoad() {
      // 获取屏幕高度
      const screenHeight = uni.getSystemInfoSync().screenHeight;
      // 计算scroll-view的高度
      const scrollHeight = screenHeight - 100;  // 100为非内容区高度
      // 更新scroll-view的高度
      this.scrollHeight = scrollHeight;
    }
  }
</script>

In diesem Beispiel verwenden wir eine Variable scrollHeight, um den Bildlauf darzustellen -Die Höhe der Ansicht, ihr Anfangswert ist 0. In der onLoad-Hook-Funktion der Seite haben wir die Höhe des Bildschirms über die API uni.getSystemInfoSync() ermittelt und die Höhe der Scroll-Ansicht basierend auf der Bildschirmhöhe berechnet. Schließlich weisen wir die berechnete Scroll-Ansichtshöhe der scrollHeight-Variablen zu und aktualisieren so die Scroll-Höhe der Seite.

2. Stellen Sie die Bildlaufhöhe der Komponente ein.

Zusätzlich zur Bildlaufhöhe der Seite müssen wir manchmal die Bildlaufhöhe für die Komponente festlegen. Uniapp bietet einen Mixin-Modus zum Teilen von Code zwischen mehreren Komponenten. Wir können das Mixin-Muster verwenden, um die Scrollhöhe der Komponente festzulegen.

1. Erstellen Sie ein Mixin

Zuerst müssen wir im Uniapp-Projekt ein Mixin erstellen. Erstellen Sie eine neue Datei „scrollHeightMixin.js“ im Ordner „/common/mixins/“ im Projektstammverzeichnis, um unseren Mixin-Code zu speichern.

export default {
  data() {
    return {
      scrollHeight: 0
    };
  },
  mounted() {
    // 获取屏幕高度
    const screenHeight = uni.getSystemInfoSync().screenHeight;
    // 计算scroll-view的高度
    const scrollHeight = screenHeight - 100;   // 100为非内容区高度
    // 更新scroll-view的高度
    this.scrollHeight = scrollHeight;
  }
};

In diesem Beispiel definieren wir ein Mixin namens scrollHeightMixin, das eine Variable namens scrollHeight enthält. In der gemounteten Hook-Funktion des Mixins verwenden wir die API uni.getSystemInfoSync(), um die Bildschirmhöhe zu ermitteln und die Scroll-View-Höhe basierend auf der Bildschirmhöhe zu berechnen. Abschließend weisen wir der Variable scrollHeight die berechnete Scroll-Ansichtshöhe zu, um die Scroll-Höhe der Komponente zu ermitteln.

2. Mixin in Komponenten verwenden

Als nächstes müssen wir das zuvor definierte Mixin in die Komponente einführen. Fügen Sie den folgenden Code in das Skript-Tag der Komponente ein:

<script>
  import ScrollHeightMixin from "@/common/mixins/scrollHeightMixin.js";
  export default {
    mixins: [ScrollHeightMixin],
    // 组件其他内容
  };
</script>

In diesem Beispiel verwenden wir die Importanweisung, um das zuvor definierte Mixin in die Komponente einzuführen. Dann fügen wir das Mixin zur Eigenschaft mixins hinzu, damit die Komponente die im Mixin definierte scrollHeight-Variable verwenden kann.

Schließlich können wir das scroll-view-Tag im Vorlagen-Tag der Komponente verwenden und die Höhe der scroll-view auf den im Mixin definierten scrollHeight-Variablenwert festlegen.

<template>
  <scroll-view :style="{height: scrollHeight + 'rpx'}">
    <!-- 组件内容 -->
  </scroll-view>
</template>

In diesem Beispiel setzen wir die Höhe der Scroll-Ansicht auf den im Mixin definierten Wert der scrollHeight-Variablen.

Zusammenfassung:

In diesem Artikel wird erläutert, wie Sie mit Uniapp die Seiten-Scroll-Höhe und die Komponenten-Scroll-Höhe festlegen. Für die Bildlaufhöhe der Seite können wir die Bildlaufansichtshöhe in der Vorlage festlegen oder die Bildlaufhöhe in der Lebenszyklus-Hook-Funktion der Seite berechnen. Für die Bildlaufhöhe der Komponenten können wir den Mixin-Modus verwenden, um dies zu erreichen. Ich hoffe, dieser Artikel hilft Ihnen beim Festlegen der Scrollhöhe in der Uniapp-Entwicklung.

Das obige ist der detaillierte Inhalt vonUniapp legt die Scrollhöhe fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!