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

相关推荐
那些免费的砖18 分钟前
Uni ECharts - 基于 ECharts 开发的 uni-app 跨端图表解决方案,和 Vue ECharts 用法几乎一致
vue.js·uni-app·echarts
木子啊35 分钟前
Uni-app rpx布局终极指南
uni-app·rpx·微信小程序rpx
qq_316837751 小时前
uniapp打包微信小程序使用插件
微信小程序·小程序·uni-app
芋头莎莎20 小时前
基于MQTT通讯UNIapp程序解析JSON数据
前端·uni-app·json
霸王蟹20 小时前
Uni-app 跨端开发框架Unibest快速体验
前端·笔记·微信·uni-app·unibest
木子啊1 天前
Uni-app条件编译:跨端开发终极指南
uni-app·条件编译
老毛肚1 天前
uniapp-ruoyi-spring部署宝塔
java·spring·uni-app
Mr Xu_1 天前
UniApp 实战:深度解析 App 端自动检测与静默更新(含强制更新)
javascript·vue.js·uni-app
说给风听.1 天前
基于 Vue3 的 UniApp 实战手册:多端开发与技能变现之路
uni-app
外派叙利亚1 天前
uniapp canvas 自定义仪表盘 可滑动 可点击 中间区域支持自定义
前端·javascript·uni-app·html