uniapp如何使用store-product实现商品展示

在uniapp中如何使用store-product组件实现商品展示？我按照官方文档配置后，页面无法正常显示商品信息。请问具体的实现步骤是怎样的？是否需要额外的插件或配置？有没有完整的示例代码可以参考？

2 回复

在uniapp中使用store-product组件展示商品，需先引入该组件，然后传入商品数据。例如：

<store-product :product="productData" />

在data中定义productData，包含商品id、名称、价格等信息。可通过API获取数据后赋值。


在uni-app中，可以使用<store-product>组件实现商品展示，该组件是uni-app官方提供的电商商品卡片，适用于展示商品信息并支持跳转。以下是基本使用方法：

1. 引入组件

在pages.json中配置组件：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^store-product-(.*)": "@/components/store-product-$1/index.vue"
    }
  }
}

2. 基础使用

在页面模板中直接使用：

<template>
  <view>
    <store-product
      :product-id="productId"
      :image="imageUrl"
      :title="productTitle"
      :price="productPrice"
      :original-price="originalPrice"
      @click="handleProductClick"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      productId: '123',
      imageUrl: '/static/product.jpg',
      productTitle: '示例商品',
      productPrice: 99.9,
      originalPrice: 129.9
    }
  },
  methods: {
    handleProductClick(product) {
      uni.navigateTo({
        url: `/pages/product/detail?id=${product.productId}`
      })
    }
  }
}
</script>

3. 主要属性说明

  • product-id: 商品ID（必需）
  • image: 商品主图URL
  • title: 商品标题
  • price: 当前价格
  • original-price: 原价（划线价）
  • tag: 商品标签（如“热销”）

4. 注意事项

  • 确保已安装uni-app官方模板或相关插件
  • 可通过样式自定义调整外观
  • 支持事件监听（如点击事件）实现页面跳转

5. 实际应用建议

结合列表渲染展示多个商品：

<store-product
  v-for="item in productList"
  :key="item.id"
  :product-id="item.id"
  :image="item.image"
  :title="item.title"
  :price="item.price"
/>

通过以上方式即可快速实现商品展示功能。如需更多定制，可参考uni-app官方文档中关于store-product组件的详细说明。

回到顶部