uniapp时间选择器

简介: uniapp时间选择器

Uniapp 是一套基于Vue.js 开发的跨平台开发框架,它能够以一套代码编译成多个平台的应用,包括 iOS、Android、H5 等。要实现时间选择器可以使用uni-app提供的组件picker,它可以用于选择器、时间选择器、日期选择器等场景。

以下是一个简单的时间选择器实现示例:

  1. 在页面上添加 picker 组件
<template>
  <view>
    <picker mode="time" @change="onChange"></picker>
    <p>当前时间:{{time}}</p>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        time: ''
      }
    },
    methods: {
      onChange(event) {
        this.time = event.detail.value
      }
    }
  }
</script>
  1. 在组件中监听 picker 的 change 事件,将选择的时间赋值给 data 中的 time 变量。
  2. 在组件中使用 {{time}} 显示选择的时间。

注意:需要在 manifest.json 中添加需要使用的组件:

"usingComponents": {
    "picker": "@vant/weapp/picker/index"
  }

这里使用了 Vant UI 组件库的 picker 组件,当然你也可以使用其他组件库或自己写组件。

目录
相关文章
|
3月前
|
小程序 API 索引
uniapp中uview组件库中丰富的Picker 选择器用法
uniapp中uview组件库中丰富的Picker 选择器用法
184 0
|
5月前
|
JSON 小程序 开发工具
uniapp获取接口数据,渲染在picker选择器里面
uniapp获取接口数据,渲染在picker选择器里面
70 0
|
5月前
|
JavaScript
Uniapp实现时间选择器
Uniapp实现时间选择器
125 0
|
3月前
|
移动开发 JavaScript 小程序
uniapp中组件库丰富的Switch 开关选择器使用方法
uniapp中组件库丰富的Switch 开关选择器使用方法
102 1
|
3月前
|
小程序 API 索引
uniapp中uview组件库的DatetimePicker 选择器的用法
uniapp中uview组件库的DatetimePicker 选择器的用法
243 0
|
4月前
|
JavaScript
uniapp实现时间选择器
uniapp实现时间选择器
|
JavaScript
vue uniapp通用省市下拉选择器组件 布局样式可灵活根据ui变更 (区域 可根据数组嵌套的格式继续往下模仿即可)
vue uniapp通用省市下拉选择器组件 布局样式可灵活根据ui变更 (区域 可根据数组嵌套的格式继续往下模仿即可)
532 0
vue uniapp通用省市下拉选择器组件 布局样式可灵活根据ui变更 (区域 可根据数组嵌套的格式继续往下模仿即可)
|
1月前
|
小程序 安全 JavaScript
从零开始uniapp微信小程序项目到发布(超级详细)
最近微信小程序又掀起一波风潮,本文站在新手的角度出发,比较适合第一次使用uniapp 开发微信小程序的伙伴,或者没有过实战经验的小伙伴参考,从零搭建uniapp小程序项目
122 1
|
1月前
|
小程序 前端开发 JavaScript
uniapp转微信小程序编译报错 Bad attr `data-event-opts` with message
uniapp转微信小程序编译报错 Bad attr `data-event-opts` with message
|
3月前
|
小程序 前端开发
uniapp 小程序接入友盟 ,自定义事件携带参数
uniapp 小程序接入友盟 ,自定义事件携带参数