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 组件,当然你也可以使用其他组件库或自己写组件。

相关推荐
爱怪笑的小杰杰8 小时前
uni-app Vue3 国际化最佳实践:告别应用重启,优雅实现多语言切换
前端·vue.js·uni-app
yqcoder9 小时前
uni-app 数据缓存详解
缓存·uni-app
2501_915921439 小时前
穿越HTTPS迷雾:Wireshark中的TLS抓包秘诀与文件合并方法
网络协议·ios·小程序·https·uni-app·wireshark·iphone
小徐_233310 小时前
uni-app 组件库 Wot UI 2.0 发布了,我们带来了这些改变!
前端·微信小程序·uni-app
yqcoder11 小时前
uni-app 之 页面路由
uni-app
小离a_a12 小时前
uniapp小程序添加路由全局限制,增加路由白名单,登录后接口跳转参数正常传递
小程序·uni-app
游九尘16 小时前
uniapp获取定位uni.getLocation报错getLocation:fail maybe not obtain GPS Permission.
uni-app
雪芽蓝域zzs1 天前
uniapp 该应用与此设备的CPU不兼容
uni-app
CHB1 天前
uni-task - 轻量级团队任务管理系统
uni-app
行思理2 天前
UniApp 打包配置 iOS的UniversalLinks
uni-app·universal link