2023Vue 中如何实现水平滚动列表？

Vue.js 是一款非常流行的前端框架，可以进行快速开发，并且可扩展性也非常好。当我们需要实现一个水平滚动列表时，Vue.js 也提供了一些非常方便的组件和指令，这让我们可以在不需要太多代码的情况下实现一个优美的水平滚动效果。

本文将介绍一个简单的方法，使用 Vue.js 和一些第三方库来实现水平滚动列表。

准备工作

首先，我们需要引入一些第三方库：Vue、Vue-Swiper 和 Swiper。其中，Vue-Swiper 是一个适用于 Vue.js 的轮播图组件，而 Swiper 是一个非常强大的轮播图插件库。

在我们的 Vue.js 项目中，可以通过以下方式来安装这些库：

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

实现方法

接下来，我们需要按照以下步骤来实现我们的水平滚动列表：

1. 引入组件和库

我们需要在 Vue.js 的 JavaScript 文件中引入我们刚才安装的三个库：

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

同时，我们也需要在 Vue.js 的 HTML 文件中引入 CSS 样式：

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

2. 创建一个容器

我们需要创建一个容器，用来包含整个滚动列表。在 Vue.js 的 HTML 文件中，我们可以像下面这样创建一个容器：

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

在上面的 HTML 示例中，我们定义了一个滚动列表容器 .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 的样式，以及滚动列表项的背景颜色。

结论

通过上述步骤，我们就可以使用 Vue.js 和 Swiper 组件来实现一个完整的水平滚动列表。正如我们看到的那样，这个过程相对简单，只需要一些少量配置和样式设置，我们就可以轻松地实现一个水平滚动列表。