Wie implementiert man eine horizontale Bildlaufliste in Vue?

Vue.js ist ein sehr beliebtes Frontend-Framework, das eine schnelle Entwicklung ermöglicht und sehr skalierbar ist. Wenn wir eine horizontale Bildlaufliste implementieren müssen, bietet Vue.js auch einige sehr praktische Komponenten und Anweisungen, mit denen wir einen schönen horizontalen Bildlaufeffekt erzielen können, ohne zu viel Code zu benötigen.

In diesem Artikel wird eine einfache Methode zum Implementieren einer horizontalen Bildlaufliste mithilfe von Vue.js und einigen Bibliotheken von Drittanbietern vorgestellt.

Vorbereitung

Zuerst müssen wir einige Bibliotheken von Drittanbietern vorstellen: Vue, Vue-Swiper und Swiper. Unter diesen ist Vue-Swiper eine Karusselldiagrammkomponente, die für Vue.js geeignet ist, und Swiper ist eine sehr leistungsstarke Karusselldiagramm-Plug-In-Bibliothek.

In unserem Vue.js-Projekt können diese Bibliotheken auf folgende Weise installiert werden:

# 通过 npm 安装
npm install vue vue-swiper swiper --save

Implementierungsmethode

Als nächstes müssen wir die folgenden Schritte ausführen, um unsere horizontale Bildlaufliste zu implementieren:

1. Komponenten und Bibliotheken einführen

Wir müssen die drei Bibliotheken, die wir gerade installiert haben, in die JavaScript-Datei von Vue.js einführen:

import Vue from 'vue';
import VueSwiper from 'vue-swiper';
import 'swiper/css/swiper.css';
import Swiper from 'swiper';

Gleichzeitig müssen wir auch CSS-Stile in die HTML-Datei von Vue.js einführen:

<link rel="stylesheet" href="/node_modules/swiper/css/swiper.css">

2. Erstellen Sie einen Container

Wir müssen einen Container erstellen, der die gesamte Bildlaufliste enthält. In der HTML-Datei von Vue.js können wir einen Container wie diesen erstellen:

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide" v-for="(item, index) in items" :key="index">{{ item }}</div>
  </div>
</div>

Im obigen HTML-Beispiel definieren wir einen scrollenden Listencontainer .swiper-container, einen Container, der alle < enthält code>.swiper-wrapper für Scroll-Listenelemente und .swiper-slide für jedes Scroll-Listenelement. Wir verwenden die Anweisung v-for, um jedes Listenelement zu durchlaufen, und das Array items enthält alle Listenelementdaten. .swiper-container，一个包含所有滚动列表项的 .swiper-wrapper，以及每个滚动列表项 .swiper-slide。我们使用 v-for 指令来循环渲染每个列表项，数组 items 包含了所有的列表项数据。

3. 初始化 Swiper

接下来，我们需要在 Vue.js 的 JavaScript 文件中，在 mounted 钩子函数中初始化 Swiper：

export default {
  data() {
    return {
      items: ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7']
    }
  },
  mounted() {
    new Swiper('.swiper-container', {
      slidesPerView: 'auto',
      spaceBetween: 30,
      scrollbar: {
        el: '.swiper-scrollbar',
        hide: false,
      },
    });
  }
}

在上面的 JavaScript 示例中，我们创建了一个 Swiper 实例，并且将 Swiper 容器选择器 .swiper-container 作为参数传递给 Swiper 的构造函数。

我们还指定了每个列表项的视图量 slidesPerView 为 auto，即自动计算每个列表项的宽度。同时，我们定义了列表项之间的间隔为 30，并且开启了滚动条功能。

4. 样式设置

最后，我们还需要为我们的滚动列表添加一些样式。在我们的 Vue.js 的 CSS 文件中，我们可以像下面这样定义样式：

.swiper-container {
  width: 100%;
  height: 100px;
  overflow: hidden;
  position: relative;
}

.swiper-wrapper {
  position: relative;
  width: fit-content;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.swiper-slide {
  padding: 20px;
  background-color: #f5f5f5;
}

在上面的 CSS 代码中，我们定义了容器 .swiper-container 的宽度为 100%，高度为 100px。我们使用了 overflow: hidden 属性，来隐藏溢出部分。 我们还通过 position: relative 属性来定义了 .swiper-wrapper 和 .swiper-slide

3. Swiper initialisieren

Als nächstes müssen wir Swiper in der gemounteten Hook-Funktion in der Vue.js-JavaScript-Datei initialisieren:

rrreee

Im obigen JavaScript-Beispiel haben wir eine Swiper-Instanz erstellt und den Swiper-Container-Selektor .swiper-container wird als Parameter an den Konstruktor von Swiper übergeben. 🎜🎜Wir geben außerdem die Ansichtsmenge jedes Listenelements slidesPerView als auto an, d. h. wir berechnen automatisch die Breite jedes Listenelements. Gleichzeitig haben wir den Abstand zwischen den Listenelementen als 30 definiert und die Scrollbar-Funktion aktiviert. 🎜🎜4. Styling 🎜🎜Zuletzt müssen wir noch etwas Styling zu unserer Scroll-Liste hinzufügen. In unserer Vue.js-CSS-Datei können wir den Stil wie folgt definieren: 🎜rrreee🎜Im obigen CSS-Code definieren wir die Breite des Containers .swiper-container auf 100 % , Höhe ist 100px. Wir verwenden das Attribut overflow: versteckt, um den Überlaufteil auszublenden. Wir definieren auch die Stile von .swiper-wrapper und .swiper-slide über das Attribut position: relative sowie die Hintergrundfarbe von die scrollbaren Listenelemente. 🎜🎜Fazit🎜🎜Durch die obigen Schritte können wir Vue.js- und Swiper-Komponenten verwenden, um eine vollständige horizontale Bildlaufliste zu implementieren. Wie wir sehen, ist der Prozess relativ einfach und mit nur geringfügiger Konfiguration und Gestaltung können wir problemlos eine horizontal scrollende Liste implementieren. 🎜

Das obige ist der detaillierte Inhalt vonWie implementiert man eine horizontale Bildlaufliste in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!