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

相关推荐
笨笨狗吞噬者12 小时前
记录一个uniapp小程序端编译时问题
前端·微信小程序·uni-app
会一丢丢蝶泳的咻狗1 天前
uni-app安卓端强制更新apk包
android·前端·uni-app
iOS阿玮2 天前
苹果审核被拒,其实可以靠回复也能过审
uni-app·app·apple
程序员小刘2 天前
HarmonyOS 5中UniApp的调试步骤
华为·uni-app·harmonyos
饭啦啦2 天前
uniapp音乐播放createInnerAudioContext
uni-app
米粒宝的爸爸2 天前
uniapp中vue3 ,uview-plus使用!
前端·vue.js·uni-app
狂龙骄子2 天前
uniapp Switch控件背景颜色自定义
css·uni-app·switch·hbuilderx·colorui
qq_424409192 天前
uniapp的app项目,在华为pad上运行,页面显示异常
uni-app
涛々2 天前
uniapp-vue3-js-vite-pinia-eslint 快速开发模板
javascript·uni-app·uniapp+vue3模板
三天不学习2 天前
使用Cursor + Devbox + Uniapp 一站式AI编程开发移动端(App、H5、小程序)
小程序·uni-app·ai编程