Comment implémenter une liste à défilement horizontal dans Vue ?

Vue.js est un framework front-end très populaire qui permet un développement rapide et est très évolutif. Lorsque nous devons implémenter une liste de défilement horizontal, Vue.js fournit également des composants et des instructions très pratiques, qui nous permettent d'obtenir un bel effet de défilement horizontal sans nécessiter trop de code.

Cet article présentera une méthode simple pour implémenter une liste à défilement horizontal à l'aide de Vue.js et de certaines bibliothèques tierces.

Préparation

Tout d'abord, nous devons introduire quelques bibliothèques tierces : Vue, Vue-Swiper et Swiper. Parmi eux, Vue-Swiper est un composant de carrousel adapté à Vue.js, et Swiper est une bibliothèque de plug-ins de carrousel très puissante.

Dans notre projet Vue.js, ces bibliothèques peuvent être installées des manières suivantes :

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

Méthode d'implémentation

Ensuite, nous devons suivre les étapes suivantes pour implémenter notre liste à défilement horizontal :

1.

Nous devons introduire les trois bibliothèques que nous venons d'installer dans le fichier JavaScript de Vue.js :

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

En même temps, nous devons également introduire les styles CSS dans le fichier HTML de Vue.js :

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

2. Créer un conteneur

Nous devons créer un conteneur pour contenir toute la liste déroulante. Dans le fichier HTML de Vue.js, nous pouvons créer un conteneur comme celui-ci :

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

Dans l'exemple HTML ci-dessus, nous définissons un conteneur de liste déroulante .swiper-container, un conteneur qui contient tous les . code>.swiper-wrapper pour les éléments de la liste déroulante et .swiper-slide pour chaque élément de la liste déroulante. Nous utilisons la directive v-for pour parcourir chaque élément de la liste, et le tableau items contient toutes les données des éléments de la liste. .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. Initialiser Swiper

Ensuite, nous devons initialiser Swiper dans la fonction hook montée dans le fichier JavaScript Vue.js :

rrreee

Dans l'exemple JavaScript ci-dessus, nous avons créé une instance Swiper et défini Swiper Le sélecteur de conteneur .swiper-container est passé en paramètre au constructeur de Swiper. 🎜🎜Nous spécifions également la quantité de vue de chaque élément de la liste slidesPerView comme auto, c'est-à-dire que nous calculons automatiquement la largeur de chaque élément de la liste. Dans le même temps, nous avons défini l'intervalle entre les éléments de la liste comme 30 et activé la fonction de barre de défilement. 🎜🎜4. Style 🎜🎜Enfin, nous devons ajouter du style à notre liste déroulante. Dans notre fichier CSS Vue.js, nous pouvons définir le style comme ceci : 🎜rrreee🎜Dans le code CSS ci-dessus, nous définissons la largeur du conteneur .swiper-container comme étant 100 % , la hauteur est 100px. Nous utilisons l'attribut overflow: Hidden pour masquer la partie débordement. Nous définissons également les styles de .swiper-wrapper et .swiper-slide via l'attribut position: relative, ainsi que la couleur d'arrière-plan de les éléments de la liste déroulante. 🎜🎜Conclusion🎜🎜Grâce aux étapes ci-dessus, nous pouvons utiliser les composants Vue.js et Swiper pour implémenter une liste de défilement horizontale complète. Comme nous pouvons le voir, le processus est relativement simple et avec juste quelques configurations et styles mineurs, nous pouvons facilement implémenter une liste à défilement horizontal. 🎜

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!