帮我写一个“美食列表”的微信小程序,美食列表包含多条美食信息,每条美食信息左侧为美食图片,右侧为美食详细信息,包括美食名称、电话、地址和营业时间。
时间: 2024-05-18 15:16:11 浏览: 240
微信小程序:美食小程序
好的,我可以为您提供一个简单的美食列表微信小程序的基本框架,您可以根据自己的需求进行修改和完善。以下是代码示例:
```
<!--index.wxml-->
<view class="container">
<view class="header">
<text class="title">美食列表</text>
</view>
<view class="list">
<block wx:for="{{foodList}}" wx:key="index">
<view class="item">
<image class="img" src="{{item.imgUrl}}"></image>
<view class="info">
<text class="name">{{item.name}}</text>
<text class="phone">{{item.phone}}</text>
<text class="address">{{item.address}}</text>
<text class="time">{{item.time}}</text>
</view>
</view>
</block>
</view>
</view>
```
```
/*index.wxss*/
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f2f2f2;
}
.header {
width: 100%;
height: 80rpx;
background-color: #f66d7a;
display: flex;
align-items: center;
justify-content: center;
}
.title {
color: #fff;
font-size: 36rpx;
}
.list {
width: 90%;
margin-top: 20rpx;
}
.item {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
border-radius: 10rpx;
padding: 20rpx;
margin-bottom: 20rpx;
box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
}
.img {
width: 150rpx;
height: 150rpx;
border-radius: 10rpx;
}
.info {
width: 60%;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
margin-left: 20rpx;
}
.name {
font-size: 32rpx;
font-weight: bold;
margin-bottom: 10rpx;
}
.phone,
.address,
.time {
font-size: 28rpx;
color: #999;
}
```
```
//index.js
Page({
data: {
foodList: [
{
imgUrl: 'https://img.yzcdn.cn/vant/cat.jpeg',
name: '烤肉拌饭',
phone: '18888888888',
address: '广州市天河区',
time: '11:00-22:00'
},
{
imgUrl: 'https://img.yzcdn.cn/vant/cat.jpeg',
name: '麻辣烫',
phone: '17777777777',
address: '广州市番禺区',
time: '10:00-22:00'
},
{
imgUrl: 'https://img.yzcdn.cn/vant/cat.jpeg',
name: '牛肉面',
phone: '16666666666',
address: '广州市海珠区',
time: '09:00-22:00'
}
]
}
})
```
以上代码实现了一个简单的美食列表,包括美食图片、名称、电话、地址和营业时间。您可以将上述代码复制到您的微信小程序项目中,并根据自己的需求进行修改和完善。
阅读全文