微信小程序美食列表作业代码
时间: 2024-06-13 15:01:03 浏览: 252
微信菜单代码
当然可以!下面是一个简单的微信小程序美食列表作业代码示例:
在wxml文件中,我们可以创建一个列表来展示美食信息:
```html
<view>
<text>美食列表</text>
<scroll-view scroll-y="true" style="height: 300px;">
<block wx:for="{{foodList}}" wx:key="index">
<view class="item">
<text>{{item.name}}</text>
<text>{{item.price}}</text>
<image src="{{item.image}}" mode="aspectFit"></image>
</view>
</block>
</scroll-view>
</view>
```
在js文件中,我们可以定义一个foodList数组,用于存储美食信息:
```javascript
Page({
data: {
foodList: [
{
name: "烤鸭",
price: "88元",
image: "../../images/duck.jpg"
},
{
name: "小龙虾",
price: "58元",
image: "../../images/crayfish.jpg"
},
{
name: "牛肉面",
price: "18元",
image: "../../images/noodle.jpg"
}
]
}
})
```
在wxss文件中,我们可以定义列表项的样式:
```css
.item {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.item text {
flex: 1;
margin-left: 10px;
}
.item image {
width: 100px;
height: 100px;
}
```
这样就完成了一个简单的微信小程序美食列表作业代码。你可以根据需要修改数据和样式,并添加其他功能。
阅读全文