当前位置：首页 > uni-app

uniapp商品列表

2026-01-13 18:10:37uni-app

商品列表实现方法

在uniapp中实现商品列表功能，可以通过多种方式完成，以下是几种常见的方法：

使用scroll-view组件实现滚动列表

<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>{{item.title}}</text>
    <text>¥{{item.price}}</text>
  </view>
</scroll-view>

使用mescroll-uni实现上拉加载下拉刷新 安装mescroll-uni插件后，可以轻松实现分页加载功能：

<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
  <view v-for="(item, index) in goodsList" :key="index">
    <!-- 商品项内容 -->
  </view>
</mescroll-uni>

通过uni-list组件实现标准列表 uni-list提供了标准化的列表样式：

<uni-list>
  <uni-list-item v-for="(item, index) in goodsList" :key="index" 
    :title="item.title" 
    :note="'¥'+item.price" 
    :thumb="item.image"
    clickable
    @click="gotoDetail(item.id)">
  </uni-list-item>
</uni-list>

数据获取与处理

商品列表通常需要从后端API获取数据：

export default {
  data() {
    return {
      goodsList: [],
      page: 1,
      pageSize: 10
    }
  },
  methods: {
    async fetchGoodsList() {
      const res = await uni.request({
        url: 'https://api.example.com/goods',
        data: {
          page: this.page,
          pageSize: this.pageSize
        }
      })
      this.goodsList = res.data.list
    }
  },
  onLoad() {
    this.fetchGoodsList()
  }
}

样式优化建议

商品列表的视觉呈现很重要，可以考虑以下样式优化：

.goods-item {
  display: flex;
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
}
.goods-item image {
  width: 200rpx;
  height: 200rpx;
  margin-right: 20rpx;
}
.goods-item text {
  display: block;
}
.price {
  color: #f40;
  font-weight: bold;
}