Comment implémenter la fonction d'arrangement mal aligné de la liste de produits dans vue

Ces dernières années, la technologie de développement front-end s'est développée rapidement. En tant que l'un des frameworks front-end les plus populaires de ces dernières années, Vue a été appréciée et recherchée par de nombreux développeurs. Dans le processus de développement actuel, Vue est souvent utilisé dans l'affichage et le rendu des listes de produits. Cependant, un simple affichage de liste de produits ne peut pas répondre aux besoins des utilisateurs. La conception d'une liste de produits échelonnée peut augmenter le sens artistique et l'expérience utilisateur de la page. Ensuite, introduisons la méthode permettant de réaliser une disposition échelonnée des listes de produits dans Vue.

1. Idées de mise en œuvre

Pour réaliser la disposition échelonnée de la liste de produits, les étapes suivantes sont nécessaires :

1. Définir la source de données de la liste de produits ;
2. Générer des fiches de produits basées sur la source de données ; largeur et hauteur de la fiche produit, calculez la position après la disposition des bits d'erreur
3. Appliquez la position calculée à chaque fiche produit en utilisant les styles CSS.
4. Examinons séparément la mise en œuvre spécifique de ces étapes.

2. Processus de mise en œuvre

1. Définir la source de données de la liste de produits

Tout d'abord, nous devons préparer certaines données de la liste de produits, y compris le nom du produit, les images du produit, le prix du produit et d'autres informations. Ces données peuvent être stockées dans un fichier JavaScript, par exemple :

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. Générer des fiches produits basées sur la source de données

Dans Vue, nous pouvons utiliser l'instruction v-for pour restituer les fiches produits. La mise en œuvre spécifique est la suivante :

<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. En fonction de la largeur et de la hauteur de la carte produit, calculez la position après le désalignement

Selon les exigences du désalignement, nous devons calculer la position de chaque carte produit. Nous pouvons calculer son désalignement en obtenant la largeur et la hauteur de la fiche produit ainsi que la largeur du conteneur. La mise en œuvre spécifique est la suivante :

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;
  }
}

Enfin, on peut appliquer la position calculée en positions à chaque fiche produit. L'implémentation spécifique est la suivante :

<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. Résumé

Cet article présente la méthode permettant de réaliser une disposition mal alignée des listes de produits dans Vue. Grâce aux étapes ci-dessus, nous pouvons facilement créer une liste de produits unique et magnifique, ce qui améliore non seulement l'expérience utilisateur, mais renforce également le sens artistique de la page. Afin que vous puissiez mieux comprendre le contenu décrit dans cet article, il est recommandé de le mettre en œuvre manuellement après avoir terminé la lecture. J'espère que cet article pourra vous être utile.

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!