Heim > Artikel > Web-Frontend > So implementieren Sie die Funktion zur fehlerhaften Anordnung der Produktliste in Vue
In den letzten Jahren hat sich die Front-End-Entwicklungstechnologie rasant weiterentwickelt. Als eines der beliebtesten Front-End-Frameworks der letzten Jahre wurde Vue von vielen Entwicklern geliebt und nachgefragt. Im eigentlichen Entwicklungsprozess wird Vue häufig bei der Anzeige und Darstellung von Produktlisten eingesetzt. Eine einfache Produktlistenanzeige kann jedoch nicht den Bedürfnissen der Benutzer gerecht werden. Das Entwerfen einer gestaffelten Produktliste kann den künstlerischen Sinn und das Benutzererlebnis der Seite verbessern. Als nächstes stellen wir vor, wie man eine gestaffelte Anordnung von Produktlisten in Vue implementiert.
Um die gestaffelte Anordnung der Produktliste zu realisieren, sind folgende Schritte erforderlich:
2. Implementierungsprozess
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. Produktkarten basierend auf der Datenquelle generieren
<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. Berechnen Sie die Position nach der Fehlausrichtung entsprechend der Breite und Höhe der Produktkarte.
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; } }
Schließlich können wir die in Positionen berechnete Position auf jede Produktkarte anwenden. Die spezifische Implementierung ist wie folgt:
<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>
3. Zusammenfassung
Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Funktion zur fehlerhaften Anordnung der Produktliste in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!