uniapp 写个商品列表

以下是一个简单的uniapp商品列表示例：

1. 在pages文件夹下新建一个goods文件夹，在该文件夹下新建一个goods.vue文件。

2. 在goods.vue文件中编写商品列表的HTML结构和样式，如下所示：

<template>
  <div class="goods">
    <div class="goods-item" v-for="(item,index) in goodsList" :key="index">
      <img :src="item.imgUrl" alt="">
      <div class="goods-info">
        <p class="goods-name">{{item.name}}</p>
        <p class="goods-price">￥{{item.price}}</p>
      </div>
    </div>
  </div>
</template>

<style>
.goods {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px;
}

.goods-item {
  width: 45%;
  margin-bottom: 20px;
  border: 1px solid #eee;
  border-radius: 5px;
  overflow: hidden;
}

.goods-item img {
  width: 100%;
  height: auto;
}

.goods-info {
  padding: 10px;
}

.goods-name {
  font-size: 16px;
  margin-bottom: 10px;
}

.goods-price {
  color: red;
  font-size: 18px;
}
</style>

3. 在data中定义商品列表数据，如下所示：

<script>
export default {
  data() {
    return {
      goodsList: [
        {
          name: "商品1",
          price: 100,
          imgUrl: require("../assets/goods1.jpg"),
        },
        {
          name: "商品2",
          price: 200,
          imgUrl: require("../assets/goods2.jpg"),
        },
        {
          name: "商品3",
          price: 300,
          imgUrl: require("../assets/goods3.jpg"),
        },
        {
          name: "商品4",
          price: 400,
          imgUrl: require("../assets/goods4.jpg"),
        },
        {
          name: "商品5",
          price: 500,
          imgUrl: require("../assets/goods5.jpg"),
        },
      ],
    };
  },
};
</script>

4. 在main.js中引入goods.vue组件，并注册为全局组件。

import Vue from 'vue'
import App from './App'
import goods from './pages/goods/goods'

Vue.config.productionTip = false

Vue.component('goods', goods)

App.mpType = 'app'

const app = new Vue({
  ...App
})
app.$mount()

5. 在需要显示商品列表的页面中，引入goods组件并使用即可。

<template>
  <div>
    <goods></goods>
  </div>
</template>

<script>
import goods from "@/pages/goods/goods";

export default {
  components: {
    goods,
  },
};
</script>