微信小程序时间选择器弹窗时分秒
时间: 2023-07-25 16:11:39 浏览: 162
时间选择器,可以到时分秒
4星 · 用户满意度95%
好的,关于微信小程序时间选择器弹窗时分秒的问题,你可以通过以下代码来实现:
1. 在 WXML 文件中添加以下代码:
```
<view class="container">
<view class="btn" bindtap="showTimePicker">选择时间</view>
</view>
<view class="picker-container" wx:if="{{showPicker}}">
<view class="picker-mask" bindtap="hidePicker"></view>
<view class="picker">
<picker mode="time" value="{{time}}" bindchange="bindTimeChange">
<view class="time-picker">
{{time}}
</view>
</picker>
</view>
</view>
```
2. 在相关的 WXSS 文件中添加以下代码:
```
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.btn {
background-color: #007aff;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
}
.picker-container {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 100%;
}
.picker-mask {
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
}
.picker {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #fff;
padding: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.time-picker {
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
font-weight: bold;
margin: 20px 0;
}
```
3. 在相关的 JS 文件中添加以下代码:
```
Page({
data: {
showPicker: false,
time: '12:00',
},
showTimePicker() {
this.setData({
showPicker: true,
});
},
hidePicker() {
this.setData({
showPicker: false,
});
},
bindTimeChange(e) {
this.setData({
time: e.detail.value,
});
},
});
```
这样就可以实现微信小程序时间选择器弹窗时分秒了,具体效果可以通过微信开发者工具进行查看。
阅读全文