近年、フロントエンド開発技術は急速に発展しており、Vue は近年最も人気のあるフロントエンド フレームワークの 1 つとして、多くの開発者に愛され、求められています。実際の開発プロセスでは、製品リストの表示やレンダリングに Vue が使用されることがよくあります。ただし、単純な商品リスト表示ではユーザーのニーズに応えることができないため、商品リストをずらして表示することで、ページの芸術性とユーザーエクスペリエンスを向上させることができます。 Vueで商品リストの千鳥配置を実現する方法を紹介します。
製品リストの千鳥配置を実現するには、次の手順が必要です:
これらのステップの具体的な実装を個別に見てみましょう。
まず、製品名、製品写真、製品価格、製品リスト データ ソースを準備する必要があります。その他の情報 。これらのデータは、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' }, // ... ];
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>
位置ずれの要件に従って、次のことが必要です。各製品カードの位置を計算します。商品カードの幅と高さ、コンテナの幅を取得することで、そのズレを計算できます。具体的な実装は次のとおりです。
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 + 'px', top: positions[index].y + 'px' }" > <img :src="item.image" alt="商品图片" /> <div class="info"> <p class="name">{{ item.name }}</p> <p class="price">¥{{ item.price }}</p> </div> </div> </div> </template>
この記事では、Vueで商品リストの並びのずれを実現する方法を紹介します。上記の手順により、ユニークで美しい商品リストを簡単に実現でき、ユーザーエクスペリエンスが向上するだけでなく、ページの芸術性も向上します。この記事で説明されている内容をより深く理解するために、読み終わった後は手動で実装することをお勧めします。この記事があなたのお役に立てば幸いです。
以上がvueで商品リストのズレ配置機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。