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存储已获取数据，下次加载时优先显示缓存内容。分页加载时注意去重处理，避免数据重复。