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

相关推荐
游戏开发爱好者819 分钟前
HTTPS 内容抓取实战 能抓到什么、怎么抓、不可解密时如何定位(面向开发与 iOS 真机排查)
android·网络协议·ios·小程序·https·uni-app·iphone
shykevin9 小时前
uni-app x导航区域跳转
windows·uni-app
2501_915106329 小时前
iOS 混淆与 IPA 加固全流程,多工具组合实现无源码混淆、源码防护与可审计流水线(iOS 混淆|IPA 加固|无源码加固|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者89 小时前
用多工具组合把 iOS 混淆做成可复用的工程能力(iOS混淆 IPA加固 无源码混淆 Ipa Guard)
android·ios·小程序·https·uni-app·iphone·webview
2501_9159214311 小时前
掌握 iOS 26 App 性能监控,从监测到优化的多工具组合流程
android·macos·ios·小程序·uni-app·cocoa·iphone
勉灬之11 小时前
通过npm run XXX命令生成uniapp的pages.json文件
npm·uni-app·json
知识分享小能手12 小时前
uni-app 入门学习教程,从入门到精通, uni-app常用API的详细语法知识点(上)(5)
前端·javascript·vue.js·学习·微信小程序·小程序·uni-app
2501_9160088913 小时前
手机 iOS 系统全解析,生态优势、开发机制与跨平台应用上架实践指南
android·ios·智能手机·小程序·uni-app·iphone·webview
00后程序员张15 小时前
Fiddler使用教程,全面掌握Fiddler抓包工具的配置方法、代理设置与调试技巧(HTTPHTTPS全解析)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
2501_9160088915 小时前
HTTPS 下的 DDoS 防护与抓包分析实战,从检测到快速缓解的工程化打法
网络协议·ios·小程序·https·uni-app·iphone·ddos