uniapp商品列表
商品列表的实现方法
在UniApp中实现商品列表通常需要结合前端页面布局、数据请求和渲染逻辑。以下是具体实现步骤：
页面布局设计
使用<scroll-view>组件实现可滚动列表，搭配<view>和<image>构建商品卡片：
<template>
<scroll-view scroll-y class="goods-list">
<view v-for="(item, index) in goodsList" :key="index" class="goods-item">
<image :src="item.image" mode="aspectFill"></image>
<view class="info">
<text class="title">{{item.title}}</text>
<text class="price">¥{{item.price}}</text>
</view>
</view>
</scroll-view>
</template>数据请求与处理
在script部分定义数据和方法：
export default {
data() {
return {
goodsList: [],
page: 1,
loading: false
}
},
onLoad() {
this.loadData()
},
methods: {
async loadData() {
if(this.loading) return
this.loading = true
const res = await uni.request({
url: 'https://api.example.com/goods',
data: { page: this.page }
})
this.goodsList = [...this.goodsList, ...res.data.list]
this.page++
this.loading = false
}
}
}样式优化
添加CSS样式美化商品列表：
.goods-list {
height: 100vh;
padding: 20rpx;
}
.goods-item {
margin-bottom: 30rpx;
background: #fff;
border-radius: 16rpx;
overflow: hidden;
}
.goods-item image {
width: 100%;
height: 300rpx;
}
.info {
padding: 20rpx;
}
.title {
font-size: 28rpx;
color: #333;
}
.price {
font-size: 32rpx;
color: #f40;
margin-top: 10rpx;
}上拉加载更多
在scroll-view上绑定触底事件：
<scroll-view scroll-y @scrolltolower="loadMore">添加对应方法：
loadMore() {
this.loadData()
}下拉刷新功能
在页面配置中开启下拉刷新：
{
"enablePullDownRefresh": true
}添加事件处理：
onPullDownRefresh() {
this.page = 1
this.goodsList = []
this.loadData().then(() => {
uni.stopPullDownRefresh()
})
}性能优化建议
对于长列表建议使用<recycle-list>组件替代常规渲染方式，可显著提升性能。商品图片使用懒加载技术，通过lazy-load属性实现。复杂列表可考虑使用虚拟滚动技术。
数据缓存策略可减少重复请求，利用uni.setStorage存储已获取数据，下次加载时优先显示缓存内容。分页加载时注意去重处理，避免数据重复。
