vue实现商品布局
Vue实现商品布局的方法
商品布局通常包括网格或列表展示、分页、筛选等功能。以下是基于Vue的实现方案：
基础结构搭建
使用Vue CLI或Vite创建项目，安装必要依赖如axios用于数据请求。商品数据通常通过API获取，存储在组件的data或Vuex/Pinia中。
data() {
return {
products: [],
loading: false,
pagination: {
page: 1,
pageSize: 12
}
}
}网格布局实现
使用CSS Grid或Flexbox实现响应式网格。通过v-for循环渲染商品卡片：
<div class="product-grid">
<div v-for="product in products" :key="product.id" class="product-card">
<img :src="product.image" :alt="product.name">
<h3>{{ product.name }}</h3>
<p>¥{{ product.price }}</p>
</div>
</div>.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
.product-card {
border: 1px solid #eee;
padding: 15px;
border-radius: 8px;
}分页功能
实现分页控件，监听页码变化重新获取数据：
methods: {
fetchProducts() {
this.loading = true;
axios.get('/api/products', {
params: {
page: this.pagination.page,
size: this.pagination.pageSize
}
}).then(response => {
this.products = response.data.items;
this.total = response.data.total;
}).finally(() => {
this.loading = false;
});
}
}筛选与排序
添加筛选表单，使用计算属性处理数据：
<select v-model="sortBy">
<option value="price_asc">价格升序</option>
<option value="price_desc">价格降序</option>
</select>computed: {
filteredProducts() {
return this.products.sort((a, b) => {
if (this.sortBy === 'price_asc') return a.price - b.price;
return b.price - a.price;
});
}
}性能优化
对于大量商品数据，考虑使用虚拟滚动或分页懒加载。可借助vue-virtual-scroller等库：
import { RecycleScroller } from 'vue-virtual-scroller';
components: { RecycleScroller }状态管理
复杂场景建议使用Pinia管理商品状态，集中处理数据获取、缓存和更新逻辑：
// stores/product.js
export const useProductStore = defineStore('product', {
state: () => ({
products: [],
filters: {}
}),
actions: {
async fetchProducts() {
const res = await api.getProducts(this.filters);
this.products = res.data;
}
}
})移动端适配
通过媒体查询调整网格列数和卡片样式：
@media (max-width: 768px) {
.product-grid {
grid-template-columns: repeat(2, 1fr);
}
}
