Vue を使用して商品カルーセル効果を設定する方法-フロントエンドQ&A-php.cn

Vue を使用して商品カルーセル効果を設定する方法

PHPz

リリース： 2023-04-12 10:36:05

オリジナル

1417 人が閲覧しました

電子商取引市場の継続的な発展に伴い、商品の表示は電子商取引プラットフォームの重要な部分となっています。その中でも、製品を表示する方法として、製品カルーセルが販売者や消費者にますます好まれています。この記事では、Vue を使用して製品カルーセルを設定する方法を紹介します。

1. Vue と Vue-Cli をインストールする

始める前に、まず Vue と Vue-Cli をインストールする必要があります。 Vue は軽量、高性能、構成可能な JavaScript フレームワークであり、Vue-Cli はフロントエンド開発プロセスとプロジェクトスキャフォールディングを提供します。

まず、ターミナルを開き、次のコマンドを入力して Vue をインストールします。

npm install vue

ログイン後にコピー

次に、次のコマンドを使用して Vue-Cli をインストールします。

npm install -g vue-cli

ログイン後にコピー

2. Vue プロジェクト

インストールが完了したら、Vue プロジェクトの作成を開始します。ターミナルを開いて次のコマンドを入力します:

vue create my-project

ログイン後にコピー

ここで、my-project はプロジェクトの名前です。実行が完了したら、プロジェクトフォルダーに入ります:

cd my-project

ログイン後にコピー

3. Swiper のインストール

この記事では Swiper ライブラリを使用して製品カルーセルを実装するため、最初に Swiper をインストールする必要があります。プロジェクトのルートディレクトリで、次のコマンドを入力します。

npm install swiper --save

ログイン後にコピー

4. Swiper ファイルと CSS ファイルをインポートします

インストールが完了したら、Swiper ファイルと CSS ファイルを Vue ファイルに導入します。 src/main.js ファイルを入力し、先頭に次のコードを追加します。

import Vue from 'vue'
import App from './App.vue'
import 'swiper/css/swiper.css'
import Swiper from 'swiper'
Vue.prototype.$swiper = Swiper
new Vue({
  render: h => h(App),
}).$mount('#app')

ログイン後にコピー

ここでは、Swiper と CSS ファイルを紹介し、Swiper を Vue のプロトタイプ属性にマウントします。

5. 製品カルーセルコンポーネントの作成

Vue プロジェクトでは、機能モジュールを個別のコンポーネントに分割できます。したがって、src/components ディレクトリに、製品カルーセルコンポーネント Carousel.vue を作成します。以下はコンポーネントのコードです:

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(item, index) in dataList">
        <img :src="item">
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
export default {
  name: 'Carousel',
  props: {
    dataList: {
      type: Array,
      default: () => []
    },
    options: {
      type: Object,
      default: () => {
        return {
          autoplay: false,
          loop: true,
          pagination: {
            el: '.swiper-pagination',
          }
        }
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$swiper) {
        this.initSwiper()
      }
    })
  },
  methods: {
    initSwiper() {
      this.$swiper('.swiper-container', this.options)
    }
  }
}
</script>

<style lang="scss" scoped>
.swiper-container {
  width: 100%;
  height: calc(real(180 / 320) * 100vw);
  overflow: hidden;
  .swiper-wrapper {
    height: 100%;
    .swiper-slide {
      height: 100%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
  }
  .swiper-pagination {
    position: absolute;
    bottom: 0;
    padding: 5px;
    text-align: right;
    z-index: 10;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    box-sizing: border-box;
  }
  .swiper-pagination-bullet {
    margin: 0 5px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.4;
    transition: all 0.2s ease;
    &.swiper-pagination-bullet-active {
      opacity: 1;
      width: 8px;
      height: 8px;
    }
  }
}
</style>

ログイン後にコピー

コンポーネントは次の部分で構成されます:

テンプレート部分 (<template>): HTML を使用します。スワイパー構造。v-for 命令をループして、商品カルーセル画像をレンダリングします。
JavaScript 部分 (<script>): コンポーネントの初期化と Swiper のマウントを実装します。
スタイルパーツ (<style>): 商品カルーセルコンポーネントのスタイルを調整します。

6. ページでカルーセルコンポーネントを使用する

Vue プロジェクトでは、ページにコンポーネントを導入できます。 src/views ディレクトリに、新しい GoodsDetail.vue ファイルを作成し、Carousel コンポーネントを使用して製品カルーセルを実装します。以下は GoodsDetail.vue のコードです:

<template>
  <div class="goods-detail">
    <carousel :dataList="goodsDetail.imgUrls" :options="{ autoplay: true }"></carousel>
  </div>
</template>

<script>
import Carousel from '@/components/Carousel.vue'
export default {
  name: 'GoodsDetail',
  data() {
    return {
      goodsDetail: {
        imgUrls: [
          'http://img1.qunarzz.com/piao/fusion/1710/e3/db0a91d642a3a002.jpg_640x200_459cc22c.jpg',
          'http://img1.qunarzz.com/piao/fusion/1710/1e/28417fbe5d5cd902.jpg_640x200_8e969821.jpg',
          'http://img1.qunarzz.com/piao/fusion/1710/4a/547f73542a4f2602.jpg_640x200_ee204ab1.jpg'
        ]
      }
    }
  },
  components: {
    Carousel
  }
}
</script>

<style lang="scss" scoped>
.goods-detail {
  .swiper-container {
    margin: 10px;
  }
}
</style>

ログイン後にコピー

ここでは、Carousel コンポーネントを導入し、製品カルーセルチャートのデータとパラメーターをそれに渡します。

この時点で、Vue は商品カルーセル画像を設定するためのコードを完成しました。これで、「GoodsDetail」ページに商品カルーセルが表示されます。

概要

この記事では、Vue を使用して製品カルーセルチャートを設定する方法を紹介します。その中で、主な実装ツールとして Swiper ライブラリを使用し、機能モジュールを個別のコンポーネントに分割することで、コードの保守性と可読性を向上させました。この記事の導入により、読者は Vue プロジェクトをより適切に開発および保守できるようになると思います。

以上がVue を使用して商品カルーセル効果を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。