uniapp时间选择器picker
时间: 2023-09-08 08:11:51 浏览: 115
在uni-app中,你可以使用`<picker>`组件来实现时间选择器。下面是一个简单的示例代码:
```html
<template>
<view>
<picker mode="time" @change="onTimeChange">
<view class="picker">
{{ selectedTime }}
</view>
</picker>
</view>
</template>
<script>
export default {
data() {
return {
selectedTime ''
}
},
methods: {
onTimeChange(event) {
this.selectedTime = event.mp.detail.value
}
}
}
</script>
<style>
.picker {
height: 200rpx;
line-height: 200rpx;
text-align: center;
font-size: 32rpx;
}
</style>
```
在这个示例中,我们使用了`<picker>`组件,并设置其`mode`属性为"time"来表示时间选择器。当用户选择时间时,通过`@change`事件监听器调用`onTimeChange`方法,在该方法中我们将选择的时间赋值给`selectedTime`,从而实时更新显示的时间。
请注意,上述示例代码是基于uni-app框架的Vue语法,如果你在使用其他框架或语言,可能会有所不同。
阅读全文