微信小程序写一个查看疫苗的页面,在页面里显示疫苗类型、开始预约时间、截止预约时间、疫苗数量,具体wxml、wxss、JavaScript怎么写
时间: 2024-06-09 07:08:15 浏览: 53
首先,你需要获取疫苗的相关信息,可以从后端接口获取。然后,你需要在 wxml 文件中创建列表,用于展示疫苗信息。在列表中,每个疫苗信息都应该包括疫苗类型、开始预约时间、截止预约时间、疫苗数量等信息。
下面是一个示例代码,你可以根据自己的需求进行修改和优化。
```
<!-- wxml文件 -->
<view class="container">
<view class="header">疫苗信息</view>
<view class="list">
<view class="item" wx:for="{{vaccines}}">
<view class="type">{{item.type}}</view>
<view class="time">{{item.start}} - {{item.end}}</view>
<view class="quantity">剩余数量:{{item.quantity}}</view>
<view class="button" bindtap="reserve">立即预约</view>
</view>
</view>
</view>
```
```
/* wxss文件 */
.container {
margin-top: 20rpx;
padding: 20rpx;
}
.header {
font-size: 32rpx;
font-weight: bold;
text-align: center;
}
.list {
margin-top: 20rpx;
}
.item {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-bottom: 20rpx;
padding: 20rpx;
background-color: #f5f5f5;
}
.type {
font-size: 28rpx;
font-weight: bold;
}
.time {
font-size: 24rpx;
color: #999;
}
.quantity {
font-size: 24rpx;
color: #333;
}
.button {
display: inline-block;
padding: 10rpx 20rpx;
background-color: #4caf50;
color: #fff;
border-radius: 5rpx;
}
```
```
// JavaScript文件
Page({
data: {
vaccines: [] // 疫苗信息列表
},
onLoad: function () {
// 从后端接口获取疫苗信息
wx.request({
url: 'xxx', // 接口地址
success: res => {
this.setData({
vaccines: res.data
})
}
})
},
reserve: function (event) {
// 处理预约操作
// ...
}
})
```
以上代码仅为示例,具体实现方式还需要根据实际需求进行调整。
阅读全文