微信小程序使用模版做商品列表
时间: 2023-09-22 09:06:52 浏览: 78
微信小程序提供了许多模板,可以在模板基础上进行修改,实现自己的需求。对于商品列表,可以使用微信小程序中提供的模板来快速实现。
首先,在微信开发者工具中创建一个新的小程序项目,然后选择模板中的“商城模板”或“商品列表模板”,这些模板已经包含了商品列表的基础布局和样式。接着,将自己的商品数据传递给模板,即可在页面中显示商品列表。
具体实现方法如下:
1. 在小程序项目中新建一个页面,命名为“商品列表”。
2. 在“商品列表”页面中引入模板组件,在 WXML 文件中添加以下代码:
```
<import src="../template/goods-list/goods-list.wxml" />
<template is="goods-list" data="{{goodsList: goodsData}}"></template>
```
其中,`goods-list` 是模板组件的名称,`goodsData` 是传递给模板的商品数据。
3. 在 JS 文件中定义商品数据,例如:
```
Page({
data: {
goodsData: [
{
id: 1,
name: '商品1',
price: 100,
image: 'https://example.com/image1.jpg'
},
{
id: 2,
name: '商品2',
price: 200,
image: 'https://example.com/image2.jpg'
},
// ...
]
}
})
```
4. 在模板组件的 WXML 文件中,使用 `wx:for` 循环遍历商品数据,生成商品列表:
```
<view class="goods-list">
<view wx:for="{{goodsList}}" wx:key="id" class="goods-item">
<image class="goods-image" src="{{item.image}}" />
<view class="goods-name">{{item.name}}</view>
<view class="goods-price">{{item.price}}</view>
</view>
</view>
```
5. 在模板组件的 WXSS 文件中,定义商品列表的样式:
```
.goods-list {
display: flex;
flex-wrap: wrap;
}
.goods-item {
width: 50%;
padding: 10rpx;
}
.goods-image {
width: 100%;
height: 200rpx;
}
.goods-name {
font-size: 28rpx;
margin-top: 10rpx;
}
.goods-price {
font-size: 24rpx;
color: #f44;
margin-top: 10rpx;
}
```
以上就是使用模板实现微信小程序商品列表的基本步骤,你可以根据自己的需求进行修改和扩展。