Bagaimana untuk melaksanakan senarai tatal mendatar dalam Vue?

Vue.js ialah rangka kerja bahagian hadapan yang sangat popular yang membolehkan pembangunan pesat dan sangat berskala. Apabila kita perlu melaksanakan senarai tatal mendatar, Vue.js juga menyediakan beberapa komponen dan arahan yang sangat mudah, yang membolehkan kita mencapai kesan tatal mendatar yang cantik tanpa memerlukan terlalu banyak kod.

Artikel ini akan memperkenalkan kaedah mudah untuk melaksanakan senarai tatal mendatar menggunakan Vue.js dan beberapa perpustakaan pihak ketiga.

Persediaan

Pertama, kami perlu memperkenalkan beberapa perpustakaan pihak ketiga: Vue, Vue-Swiper dan Swiper. Antaranya, Vue-Swiper ialah komponen karusel yang sesuai untuk Vue.js, dan Swiper ialah perpustakaan pemalam karusel yang sangat berkuasa.

Dalam projek Vue.js kami, perpustakaan ini boleh dipasang dengan cara berikut:

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

Kaedah pelaksanaan

Seterusnya, kami perlu mengikuti langkah berikut untuk melaksanakan senarai tatal mendatar kami:

1

Kami perlu memperkenalkan tiga perpustakaan yang baru kami pasang ke dalam fail JavaScript Vue.js:

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

Pada masa yang sama, kami juga perlu memperkenalkan gaya CSS ke dalam fail HTML Vue.js:

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

2. Buat bekas

Kita perlu mencipta bekas untuk mengandungi keseluruhan senarai skrol. Dalam fail HTML Vue.js, kami boleh mencipta bekas seperti ini:

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

Dalam contoh HTML di atas, kami mentakrifkan bekas senarai menatal .swiper-container, bekas yang mengandungi semua .swiper-wrapper untuk menatal item senarai dan .swiper-slide untuk setiap item senarai menatal. Kami menggunakan arahan v-for untuk melingkari setiap item senarai dan tatasusunan item mengandungi semua data item senarai. .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 Initialize Swiper

Seterusnya, kita perlu memulakan Swiper dalam fungsi cangkuk yang dipasang dalam fail JavaScript Vue.js:

rrreee

Dalam contoh JavaScript di atas, kami mencipta contoh Swiper dan menetapkan Swiper The container selector .swiper-container dihantar sebagai parameter kepada pembina <code>Swiper. 🎜🎜Kami juga menentukan jumlah paparan setiap item senarai slidesPerView sebagai auto, iaitu mengira lebar setiap item senarai secara automatik. Pada masa yang sama, kami menentukan selang antara item senarai sebagai 30 dan mendayakan fungsi bar skrol. 🎜🎜4. Penggayaan 🎜🎜Akhir sekali, kami perlu menambah beberapa penggayaan pada senarai tatal kami. Dalam fail CSS Vue.js kami, kami boleh mentakrifkan gaya seperti ini: 🎜rrreee🎜Dalam kod CSS di atas, kami mentakrifkan lebar bekas .swiper-container menjadi 100% , ketinggian ialah 100px. Kami menggunakan atribut overflow: hidden untuk menyembunyikan bahagian limpahan. Kami juga mentakrifkan gaya .swiper-wrapper dan .swiper-slide melalui atribut position: relative, serta warna latar belakang item senarai tatal. 🎜🎜Kesimpulan🎜🎜Melalui langkah di atas, kita boleh menggunakan komponen Vue.js dan Swiper untuk melaksanakan senarai tatal mendatar yang lengkap. Seperti yang dapat kita lihat, prosesnya agak mudah dan dengan hanya beberapa konfigurasi dan penggayaan kecil kita boleh melaksanakan senarai menatal secara mendatar dengan mudah. 🎜

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan senarai tatal mendatar dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!