请用微信小程序语言实现以下编程题。请编写一个商品列表页面,展示商品名称和价格
时间: 2024-10-27 14:07:20 浏览: 22
在微信小程序中,你可以使用WXML、WXSS和JavaScript来实现这个简单的商品列表页面。首先,创建一个wxml文件(如`list.wxml`),用于结构布局:
```html
<view class="container">
<view wx:for="{{ products }}" index="index" item="item">
<view class="product-item">
<text class="name">{{ item.name }}</text>
<text class="price">价格:{{ item.price }}</text>
</view>
</view>
</view>
```
然后,在对应的js文件(如`list.js`)中设置数据和事件处理:
```javascript
Page({
data: {
products: [
{ name: '商品1', price: '19.99元' },
{ name: '商品2', price: '24.99元' },
{ name: '商品3', price: '39.99元' }
]
},
})
```
同时,在wxss文件(如`list.wxss`)中设置样式:
```css
.container {
display: flex;
flex-direction: column;
}
.product-item {
margin-bottom: 10rpx;
}
.name {
font-weight: bold;
}
.price {
color: #666;
}
```
在这个例子中,`products`数组包含了商品的数据,通过`wx:for`遍历显示每个商品的名称和价格。用户不需要做任何额外操作,只需在微信开发者工具中预览或发布到小程序即可看到商品列表。
阅读全文