uniapp时间选择器

Uniapp 是一套基于Vue.js 开发的跨平台开发框架,它能够以一套代码编译成多个平台的应用,包括 iOS、Android、H5 等。要实现时间选择器可以使用uni-app提供的组件picker,它可以用于选择器、时间选择器、日期选择器等场景。

以下是一个简单的时间选择器实现示例:

  1. 在页面上添加 picker 组件

    <template> <view> <picker mode="time" @change="onChange"></picker>

    当前时间:{{time}}

    </view> </template> <script> export default { data() { return { time: '' } }, methods: { onChange(event) { this.time = event.detail.value } } } </script>
  2. 在组件中监听 picker 的 change 事件,将选择的时间赋值给 data 中的 time 变量。

  3. 在组件中使用 {{time}} 显示选择的时间。

注意:需要在 manifest.json 中添加需要使用的组件:

复制代码
"usingComponents": {
    "picker": "@vant/weapp/picker/index"
  }

这里使用了 Vant UI 组件库的 picker 组件,当然你也可以使用其他组件库或自己写组件。

相关推荐
CDwenhuohuo4 小时前
uniapp去掉手机状态栏 全屏展示
开发语言·javascript·uni-app
行走的陀螺仪8 小时前
使用uniapp,实现根据时间倒计时执行进度条变化
前端·javascript·uni-app·vue2·h5
Hzsilvana8 小时前
踩坑日记:Uniapp项目定位偏差与依赖更新的真相
uni-app
丸子哥哥11 小时前
vue + uni-app:利用原生uni.chooseImage封装拍照功能的组件
微信小程序·uni-app·vue
雪芽蓝域zzs12 小时前
uniapp 判断运行设备类型(安卓、苹果、鸿蒙、微信小程序、H5)
android·uni-app·harmonyos
梦65012 小时前
UniApp 全面介绍与快速上手
uni-app
壹号机长12 小时前
uniapp+vue3 接入deepseek Ai
ai·小程序·uni-app
2501_9151063212 小时前
iOS开发中CPU功耗监控的实现与工具使用
android·macos·ios·小程序·uni-app·cocoa·iphone
绿鸳12 小时前
uniapp安装uview-plus
uni-app
iOS阿玮1 天前
鸿蒙激励的羊毛,你"薅"到了么?
uni-app·app·apple