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

相关推荐
baozhengw7 小时前
UniAPP快速入门教程(一)
前端·uni-app
公子艾11 小时前
uniapp设置tabBar高斯模糊并设置tabBar高度占位
uni-app
晓风伴月13 小时前
uniapp: IOS微信小程序输入框部分被软键盘遮挡问题
微信小程序·小程序·uni-app
转角羊儿13 小时前
uni-app文章列表制作⑧
前端·javascript·uni-app
糊涂涂是个小盆友14 小时前
前端 - 使用uniapp+vue搭建前端项目(app端)
前端·vue.js·uni-app
阿巴阿巴Ovo15 小时前
uniapp中多角色导致tabbar过多的解决方式
uni-app
Json____18 小时前
学法减分交管12123模拟练习小程序源码前端和后端和搭建教程
前端·后端·学习·小程序·uni-app·学法减分·驾考题库
云深时现月19 小时前
jenkins使用cli发行uni-app到h5
前端·uni-app·jenkins
diygwcom19 小时前
低代码可视化-uniapp开关选择组件-低码生成器
uni-app
fakaifa1 天前
CRMEB Pro版v3.1源码全开源+PC端+Uniapp前端+搭建教程
前端·小程序·uni-app·php·源码下载