UniApp实现购物与订单管理的实现_uniapp商品列表

在UniApp中，我们可以通过使用uni-list和uni-list-item组件来实现商品列表。我们可以在页面的template部分添加以下代码：

<template>
 
  <view>
 
    <uni-list>
 
      <uni-list-item v-for="item in productList" :key="item.id">
 
        <view slot="title">{
  { item.name }}</view>
 
        <view slot="note">{
  { item.price }}</view>
 
      </uni-list-item>
 
    </uni-list>
 
  </view>
 
</template>
 
 
 
<script>
 
export default {
 
  data() {
 
    return {
 
      productList: [
 
        { id: 1, name: '商品1', price: 10 },
 
        { id: 2, name: '商品2', price: 20 },
 
        { id: 3, name: '商品3', price: 30 },
 
      ],
 
    };
 
  },
 
};
 
</script>

添加到购物车
在商品列表中，我们可以通过使用uni-button来添加商品到购物车。我们可以在页面的template部分添加以下代码：