최근 몇 년 동안 프런트엔드 개발 기술이 빠르게 발전했습니다. 최근 가장 인기 있는 프런트엔드 프레임워크 중 하나로 Vue는 많은 개발자들에게 사랑받고 인기를 얻었습니다. 실제 개발 과정에서 Vue는 제품 목록 표시 및 렌더링에 자주 사용됩니다. 그러나 단순한 상품 목록 표시로는 사용자의 요구를 충족할 수 없습니다. 시차를 두고 표시되는 상품 목록을 디자인하면 페이지의 예술적 감각과 사용자 경험을 높일 수 있습니다. Vue에서 상품 목록의 시차 배치를 구현하는 방법을 소개하겠습니다.
제품 목록의 시차 배열을 실현하려면 다음 단계가 필요합니다.
2. 구현 프로세스
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. 데이터 소스를 기반으로 제품 카드 생성
<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 + '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. 요약
위 내용은 Vue에서 상품 목록 정렬 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!