以下是一个简单的
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>
```
最低0.47元/天 解锁文章
2354
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
