学习Uni-app开发小程序Day14
在Uni-app开发小程序的过程中,我们可以使用<picker>
组件来实现时间选择器的功能。以下是一个简单的例子,展示了如何在Uni-app中使用<picker>
组件来创建一个时间选择器:
<template>
<view>
<view class="picker">
<picker mode="time" value="{{time}}" start="09:00" end="17:00" onChange="bindTimeChange">
<view>当前选择的时间:{{time}}</view>
</picker>
</view>
</view>
</template>
<script>
export default {
data() {
return {
time: '12:00'
}
},
methods: {
bindTimeChange(e) {
this.time = e.target.value;
}
}
}
</script>
<style>
.picker {
padding: 10px;
}
</style>
在这个例子中,我们定义了一个time
数据属性来存储选中的时间,并且在<picker>
组件中设置了mode
为time
来指定选择器的模式为时间。start
和end
属性用来设置可选择的时间范围。onChange
事件用来监听用户选择时间的变化,并更新time
数据属性。
评论已关闭