商品列表
shangpin.wxml
<view class="container">
<view class="title">商品列表</view>
<view class="product-list">
<view wx:for="{{products}}" wx:key="id" class="product-item">
<image src="{{item.image}}" mode="aspectFill" class="product-image"></image>
<view class="product-name">{{item.name}}</view>
<view class="product-description">{{item.description}}</view>
<view class="product-price">￥{{item.price}}</view>
</view>
</view>
</view>
shangpin.wxss
/* pages/shang/shangpin.wxss */
.container {
padding: 20px;
}
.title {
font-size: 24px;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
}
.product-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.product-item {
width: calc(50% - 10px);
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
border-radius: 5px;
padding: 10px;
margin-bottom: 20px;
}
.product-image {
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 5px;
}
.product-name {
font-size: 16px;
font-weight: bold;
margin-top: 10px;
}
.product-description {
font-size: 14px;
color: #666;
margin-top: 5px;
}
shangpin.json
{
"navigationBarTitleText": "商品列表"
}
shangpin.js
Page({
data: {
products: [
{
id: 1,
name: '商品 1',
description: '这是商品 1 的描述',
price: 99.99,
image: 'https://picsum.photos/200/300'
},
{
id: 2,
name: '商品 2',
description: '这是商品 2 的描述',
price: 199.99,
image: 'https://picsum.photos/200/300'
},
{
id: 3,
name: '商品 3',
description: '这是商品 3 的描述',
price: 299.99,
image: 'https://picsum.photos/200/300'
},
{
id: 4,
name: '商品 4',
description: '这是商品 4 的描述',
price: 399.99,
image: 'https://picsum.photos/200/300'
}
]
}
})
美团泡池子370人在聊
投递蚂蚁集团等公司8个岗位 >