vueで商品リストのズレ配置機能を実装する方法

近年、フロントエンド開発技術は急速に発展しており、Vue は近年最も人気のあるフロントエンド フレームワークの 1 つとして、多くの開発者に愛され、求められています。実際の開発プロセスでは、製品リストの表示やレンダリングに Vue が使用されることがよくあります。ただし、単純な商品リスト表示ではユーザーのニーズに応えることができないため、商品リストをずらして表示することで、ページの芸術性とユーザーエクスペリエンスを向上させることができます。 Vueで商品リストの千鳥配置を実現する方法を紹介します。

1. 実装のアイデア

製品リストの千鳥配置を実現するには、次の手順が必要です:

1. 製品リスト データ ソースを定義します。
2. データ ソースに基づいて製品カードを生成します;
3. 製品カードの幅と高さに基づいて位置ずれ後の位置を計算します;
4. 計算された位置を次を使用して各製品カードに適用しますCSS スタイル。

これらのステップの具体的な実装を個別に見てみましょう。

2. 実装プロセス

1. 製品リスト データ ソースの定義

まず、製品名、製品写真、製品価格、製品リスト データ ソースを準備する必要があります。その他の情報 。これらのデータは、JavaScript ファイルに保存できます (例:

const goods = [
  {
    id: 1,
    name: 'Apple iPhone 12',
    price: 6999,
    image: 'https://xxx.com/xxx.jpg'
  },
  {
    id: 2,
    name: 'Samsung Galaxy S21',
    price: 7999,
    image: 'https://xxx.com/xxx.jpg'
  },
  // ...
];

2. データ ソースに基づいて製品カードを生成します

Vue では、v-for 命令を使用して製品をレンダリングできます)カード。具体的な実装は次のとおりです:

<template>
  <div class="goods-list">
    <div
      class="goods-card"
      v-for="item in goods"
      :key="item.id"
    >
      <img :src="item.image" alt="商品图片" />
      <div class="info">
        <p class="name">{{ item.name }}</p>
        <p class="price">¥{{ item.price }}</p>
      </div>
    </div>
  </div>
</template>

3. 製品カードの幅と高さに応じて、位置ずれ後の位置を計算します

位置ずれの要件に従って、次のことが必要です。各製品カードの位置を計算します。商品カードの幅と高さ、コンテナの幅を取得することで、そのズレを計算できます。具体的な実装は次のとおりです。

computed: {
  // 计算出商品卡片的宽度
  cardWidth() {
    const containerWidth = /* 获取容器宽度 */;
    const gutter = /* 获取卡片之间的间距 */;
    const columnNum = /* 获取列数 */;

    return (containerWidth - gutter * (columnNum - 1)) / columnNum;
  },

  // 计算出商品卡片的高度
  cardHeight() {
    return /* 获取商品卡片的高度 */;
  },

  // 计算出每个商品卡片的错位位置
  positions() {
    const cardList = /* 获取商品卡片列表 */;
    const gutter = /* 获取卡片之间的间距 */;

    const positions = [];
    let x = 0;
    let y = 0;

    cardList.forEach((card, index) => {
      positions.push({ x, y });
      x += index % 2 === 0 ? this.cardWidth + gutter : -this.cardWidth - gutter;
      y += index % 2 === 0 ? 0 : this.cardHeight + gutter;
    });

    return positions;
  }
}

最後に、位置で計算された位置を各製品カードに適用できます。具体的な実装は以下の通りです:

<template>
  <div class="goods-list">
    <div
      class="goods-card"
      v-for="(item, index) in goods"
      :key="item.id"
      :style="{ left: positions[index].x + &#39;px&#39;, top: positions[index].y + &#39;px&#39; }"
    >
      <img :src="item.image" alt="商品图片" />
      <div class="info">
        <p class="name">{{ item.name }}</p>
        <p class="price">¥{{ item.price }}</p>
      </div>
    </div>
  </div>
</template>

3. まとめ

この記事では、Vueで商品リストの並びのずれを実現する方法を紹介します。上記の手順により、ユニークで美しい商品リストを簡単に実現でき、ユーザーエクスペリエンスが向上するだけでなく、ページの芸術性も向上します。この記事で説明されている内容をより深く理解するために、読み終わった後は手動で実装することをお勧めします。この記事があなたのお役に立てば幸いです。

以上がvueで商品リストのズレ配置機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。