当前位置: 首页 > article >正文

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


http://www.kler.cn/a/144761.html

相关文章:

  • 电源控制系统架构(PCSA)之电源控制框架概览
  • Apache多后缀解析漏洞分析
  • 【OpenCV实现图像:可视化目标检测框】
  • 微机原理_4
  • Redis key 过期监听实现
  • MUYUCMS v2.1:一款开源、轻量级的内容管理系统
  • 究极短的快排代码【QuickSort】
  • Spring(2):Spring事务管理机制
  • BERT-pytorch源码实现,解决内存溢出问题
  • 基于 STM32 的温度测量与控制系统设计
  • AUTOSAR汽车电子嵌入式编程精讲300篇-基于机器学习的车载 CAN 网络入侵检测(续)
  • GB28181学习(十七)——基于jrtplib实现tcp被动和主动发流
  • python的requests请求参数带files
  • vue一个页面左边是el-table表格 当点击每条数据时可以在右边界面编辑表格参数,右边保存更新左边表格数据
  • 不用排队升级GPT/获取api
  • 键入网址到网页显示,期间发生了什么?
  • 【云原生 Prometheus篇】Prometheus的动态服务发现机制
  • 【数据结构实验】图(二)将邻接矩阵存储转换为邻接表存储
  • 入门指南:介绍Python库——Pandas
  • 首页以卡片形式来展示区块链列表数据(Web3项目一实战之五)