uniapp商品列表
实现商品列表的基本结构
在uniapp中，商品列表通常通过<scroll-view>或<list>组件实现，搭配v-for循环渲染商品数据。示例代码：
<template>
<view class="goods-list">
<scroll-view scroll-y="true" style="height: 100vh;">
<view v-for="(item, index) in goodsList" :key="index" class="goods-item">
<image :src="item.image" mode="aspectFill"></image>
<text class="title">{{ item.title }}</text>
<text class="price">¥{{ item.price }}</text>
</view>
</scroll-view>
</view>
</template>数据绑定与加载
商品数据通常从后端API获取，通过onLoad生命周期或自定义方法加载。示例：
<script>
export default {
data() {
return {
goodsList: [],
page: 1,
pageSize: 10
};
},
onLoad() {
this.loadGoodsList();
},
methods: {
async loadGoodsList() {
const res = await uni.request({
url: 'https://api.example.com/goods',
data: { page: this.page, pageSize: this.pageSize }
});
this.goodsList = [...this.goodsList, ...res.data.list];
}
}
};
</script>样式优化与布局
使用Flex布局或Grid布局优化商品列表的显示效果。CSS示例：
<style>
.goods-list {
padding: 20rpx;
}
.goods-item {
display: flex;
flex-direction: column;
margin-bottom: 20rpx;
background: #fff;
border-radius: 10rpx;
overflow: hidden;
}
.goods-item image {
width: 100%;
height: 300rpx;
}
.title {
font-size: 28rpx;
padding: 10rpx;
}
.price {
color: #ff2d4a;
font-weight: bold;
padding: 10rpx;
}
</style>下拉刷新与上拉加载
通过scroll-view或pages.json配置实现分页功能。下拉刷新示例：
onPullDownRefresh() {
this.page = 1;
this.goodsList = [];
this.loadGoodsList().then(() => {
uni.stopPullDownRefresh();
});
},
onReachBottom() {
this.page++;
this.loadGoodsList();
}性能优化建议
- 图片懒加载：在
image标签中添加lazy-load属性。 - 数据分页：避免一次性加载过多数据，分页请求减轻服务器压力。
- 虚拟列表：超长列表时使用
<unicloud-db>或第三方插件优化渲染性能。
交互增强
添加商品点击事件跳转详情页：
<view
v-for="(item, index) in goodsList"
:key="index"
class="goods-item"
@click="navigateToDetail(item.id)"
>
</view>methods: {
navigateToDetail(id) {
uni.navigateTo({
url: `/pages/goods/detail?id=${id}`
});
}
}以上步骤覆盖了uniapp商品列表的核心实现逻辑，可根据实际需求调整样式和功能。
