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

相关推荐
DK185838322522 小时前
知识付费会员小程序/付费圈子系统——课程兑换码+会员体系完整实战,开源运营级方案
小程序·uni-app·开源·php
陈龙龙的陈龙龙15 小时前
uni-app中获取参数的几个方法
uni-app
果壳~15 小时前
【Uniapp】【rich-text】富文本展示以及图片预览功能解决方案
前端·javascript·uni-app
雯0609~15 小时前
微信小程序的原生开发项目如何转至uni-app
微信小程序·小程序·uni-app
四方云16 小时前
Uni-app 跨端集成 SIP 电话功能(H5 + App)实战
uni-app
习明然1 天前
UniApp开发体验感受总结
前端·uni-app
anyup1 天前
全面重构的 uni-app 多平台上传组件,功能强到离谱!
前端·vue.js·uni-app
LIO2 天前
一套代码,多端并行——uni-app + Vue3 多端开发完全指南
前端·vue.js·uni-app
西洼工作室2 天前
个人资质实现微信授权登录和内嵌微信二维码扫码登录
python·微信·uni-app·全栈
求学中--2 天前
状态管理一文通:@State、@Prop、@Link、@Provide/Consume全解析
人工智能·小程序·uni-app·wpf·harmonyos