实现微信小程序美食列表的渲染,打出wxss文件、js文件、wxml文件
时间: 2023-12-25 19:03:32 浏览: 38
好的,下面是一个简单的微信小程序美食列表的代码示例,包括wxss文件、js文件、wxml文件:
wxss文件(style.wxss):
```css
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.card {
width: 45%;
margin-bottom: 20rpx;
background-color: #fff;
box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
border-radius: 8rpx;
overflow: hidden;
}
.card-img {
width: 100%;
height: 200rpx;
object-fit: cover;
}
.card-title {
font-size: 32rpx;
font-weight: bold;
margin: 20rpx;
}
.card-subtitle {
font-size: 28rpx;
color: #999;
margin: 0 20rpx 20rpx;
}
.card-button {
display: block;
width: 100%;
text-align: center;
font-size: 28rpx;
color: #fff;
background-color: #ff6347;
padding: 10rpx 20rpx;
border-radius: 30rpx;
margin: 20rpx;
}
```
js文件(index.js):
```javascript
Page({
data: {
foodList: [
{
id: 1,
title: '美食1',
subtitle: '这是美食1的描述',
imageUrl: 'https://picsum.photos/id/237/200/200',
},
{
id: 2,
title: '美食2',
subtitle: '这是美食2的描述',
imageUrl: 'https://picsum.photos/id/238/200/200',
},
{
id: 3,
title: '美食3',
subtitle: '这是美食3的描述',
imageUrl: 'https://picsum.photos/id/239/200/200',
},
{
id: 4,
title: '美食4',
subtitle: '这是美食4的描述',
imageUrl: 'https://picsum.photos/id/240/200/200',
},
{
id: 5,
title: '美食5',
subtitle: '这是美食5的描述',
imageUrl: 'https://picsum.photos/id/241/200/200',
},
{
id: 6,
title: '美食6',
subtitle: '这是美食6的描述',
imageUrl: 'https://picsum.photos/id/242/200/200',
},
],
},
handleCardTap(event) {
const { id } = event.currentTarget.dataset;
wx.navigateTo({
url: `/pages/detail/detail?id=${id}`,
});
},
});
```
wxml文件(index.wxml):
```html
<view class="container">
<view wx:for="{{foodList}}" wx:key="id" class="card" bindtap="handleCardTap" data-id="{{item.id}}">
<image class="card-img" src="{{item.imageUrl}}" mode="aspectFill"></image>
<view class="card-title">{{item.title}}</view>
<view class="card-subtitle">{{item.subtitle}}</view>
<button class="card-button">查看详情</button>
</view>
</view>
```
这是一个简单的微信小程序美食列表的实现,你可以根据自己的需要进行修改和调整。