微信小程序,请编写一个商品列表页面,展示商品名称和价格
时间: 2023-05-29 12:03:37 浏览: 588
1. 在小程序开发工具中,新建一个页面,命名为“商品列表”。
2. 在页面的 wxml 文件中,添加一个列表组件,用于展示商品列表:
```
<view class="container">
<view class="list">
<block wx:for="{{products}}" wx:key="index">
<view class="item">
<view class="name">{{item.name}}</view>
<view class="price">{{item.price}}</view>
</view>
</block>
</view>
</view>
```
3. 在页面的 js 文件中,定义商品列表数据,并将其绑定到页面的 data 中:
```
Page({
data: {
products: [
{ name: '商品1', price: '100元' },
{ name: '商品2', price: '200元' },
{ name: '商品3', price: '300元' },
{ name: '商品4', price: '400元' },
{ name: '商品5', price: '500元' },
]
}
})
```
4. 在页面的 wxss 文件中,定义商品列表的样式:
```
.container {
padding: 20rpx;
}
.list {
background-color: #f5f5f5;
}
.item {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 20rpx;
}
.name {
font-size: 32rpx;
color: #333;
}
.price {
font-size: 28rpx;
color: #f00;
}
```
5. 在小程序开发工具中,预览商品列表页面,可以看到商品列表展示了商品名称和价格。