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();
}

性能优化建议

1. 图片懒加载：在image标签中添加lazy-load属性。
2. 数据分页：避免一次性加载过多数据，分页请求减轻服务器压力。
3. 虚拟列表：超长列表时使用<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商品列表的核心实现逻辑，可根据实际需求调整样式和功能。