Bagaimana untuk melaksanakan fungsi susunan tidak sejajar senarai produk dalam vue

Dalam beberapa tahun kebelakangan ini, teknologi pembangunan bahagian hadapan telah berkembang pesat Sebagai salah satu rangka kerja bahagian hadapan yang paling popular dalam beberapa tahun kebelakangan ini, Vue telah digemari dan dicari oleh ramai pembangun. Dalam proses pembangunan sebenar, Vue sering digunakan dalam paparan dan pemaparan senarai produk. Walau bagaimanapun, paparan senarai produk yang ringkas tidak dapat memenuhi keperluan pengguna. Mereka bentuk senarai produk berperingkat boleh meningkatkan rasa artistik dan pengalaman pengguna halaman. Mari perkenalkan kaedah merealisasikan susunan berperingkat senarai produk dalam Vue.

1. Idea pelaksanaan

Untuk mencapai susunan senarai produk yang berperingkat, langkah berikut diperlukan:

1. Tentukan sumber data senarai produk; 🎜> Hasilkan kad produk berdasarkan sumber data;
2. kira kedudukan selepas salah jajaran berdasarkan lebar dan ketinggian kad produk; .
3. Mari kita lihat pelaksanaan khusus langkah-langkah ini secara berasingan.
4. 2. Proses pelaksanaan

1. Tentukan sumber data senarai produk

Pertama, kita perlu menyediakan beberapa data senarai produk, termasuk nama produk, gambar produk, harga produk dan maklumat lain. Data ini boleh disimpan dalam fail JavaScript, contohnya:

2 Hasilkan kad produk berdasarkan sumber data

Dalam Vue, kita boleh menggunakan arahan v-for untuk. render kad produk . Pelaksanaan khusus adalah seperti berikut:

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'
  },
  // ...
];

3 Mengikut lebar dan ketinggian kad produk, kira kedudukan selepas salah jajaran

Mengikut keperluan salah jajaran, kami. perlu mengira setiap lokasi kad produk. Kita boleh mengira salah jajarannya dengan mendapatkan lebar dan tinggi kad produk dan lebar bekas. Pelaksanaan khusus adalah seperti berikut:

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

Akhir sekali, kita boleh menggunakan kedudukan yang dikira dalam kedudukan pada setiap kad produk. Pelaksanaan khusus adalah seperti berikut:

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

3 Ringkasan

Artikel ini memperkenalkan kaedah merealisasikan susunan senarai produk yang salah dalam Vue. Melalui langkah di atas, kami boleh dengan mudah merealisasikan senarai produk yang unik dan cantik, yang bukan sahaja meningkatkan pengalaman pengguna tetapi juga meningkatkan rasa artistik halaman. Untuk anda lebih memahami kandungan yang diterangkan dalam artikel ini, anda disyorkan untuk melaksanakannya secara manual selepas selesai membaca. Semoga artikel ini dapat membantu anda.

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

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi susunan tidak sejajar senarai produk dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!