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

相关推荐
织_网1 天前
UniApp 快速集成个推推送(UniPush2.0)完整实战教程
uni-app
星星~笑笑1 天前
vue 超简单 oss分片上传文件 大文件上传阿里云
前端·javascript·vue.js·uni-app
jingling5552 天前
uni-app农场地图——高德 JS API 实现全解析(天地图影像作为layers)
uni-app
2501_916008892 天前
Mac 上生成 AppStoreInfo.plist 文件,App Store 上架
android·macos·ios·小程序·uni-app·iphone·webview
__zRainy__2 天前
uni-app 全局容器实战系列(四):全局容器动态调用设计
uni-app
2501_916007473 天前
iOS开发中抓取HTTPS请求的完整解决方法与步骤详解
android·网络协议·ios·小程序·https·uni-app·iphone
00后程序员张3 天前
Windows 下怎么生成 AppStoreInfo.plist?不依赖 Xcode 的方法
ide·macos·ios·小程序·uni-app·iphone·xcode
__zRainy__3 天前
uni-app 全局容器实战系列(二):Vite 虚拟模块
windows·uni-app
__zRainy__3 天前
uni-app 全局容器实战系列(一):全局容器的实现
uni-app·vite
安生生申3 天前
uni-app 连接 JDY-31 蓝牙串口模块实践
c语言·前端·javascript·stm32·单片机·嵌入式硬件·uni-app