uni-app:实现普通选择器,时间选择器,日期选择器,多列选择器
效果
选择前效果

1、时间选择器

2、日期选择器

3、普通选择器

4、多列选择器

选择后效果

代码
<template><!-- 时间选择器 --><view class="line"><view class='item1'><view class='left'>时间</view><view class="right"><picker mode="time" :value="selectedTime" @change="onTimeChange"><view class="picker">{{selectedTime}}</view></picker></view></view></view><!-- 日期选择器 --><view class="line"><view class='item1'><view class='left'>日期</view><view class="right"><picker mode="date" :value="selectedDate" @change="onDateChange"><view class="picker">{{selectedDate}}</view></picker></view></view></view><!-- 基本选择器 --><view class="line"><view class='item1'><view class='left'>普通选择</view><view class="right"><picker mode="selector" :range="options" @change="onSelectorChange"><view class="picker">{{selectedOption}}</view></picker></view></view></view><!-- 多列选择器 --><view class="line"><view class='item1'><view class='left'>多列选择</view><view class="right"><picker mode="multiSelector" :range="multiOptions" @change="onMultiSelectorChange"><view class="picker">{{selectedMultiOption.join(' - ')}}</view></picker></view></view></view>
</template><script>export default {data() {return {//选择的时间selectedTime: '请选择',//选择的日期selectedDate: '请选择',//普通选择器options: ['子项1', '子项2', '子项3'],selectedOption: '请选择',//多列选择器multiOptions: [['选项1', '选项2', '选项3'], // 第一列选项['A', 'B', 'C'] // 第二列选项],selectedMultiOption: ['请选择', '请选择'], // 当前选中的选项}},onLoad() {},methods: {// 时间选择器值改变时触发onTimeChange(event) {this.selectedTime = event.detail.value;console.log('选择的时间:', this.selectedTime);},// 日期选择器改变时触发onDateChange(event) {this.selectedDate = event.detail.value;console.log('选择的日期:', this.selectedTime);},// 普通选择器改变时触发onSelectorChange: function(e) {console.log('picker发送选择改变,携带下标为', e.detail.value)console.log('选怎的自定义列表值' + this.options[e.detail.value])this.selectedOption = this.options[e.detail.value];},// 多列选择器改变时触发onMultiSelectorChange(event) {const values = event.detail.value; // 选中的下标数组this.selectedMultiOption = [this.multiOptions[0][values[0]], // 第一列选中的值this.multiOptions[1][values[1]] // 第二列选中的值];console.log('选中的选项:', this.selectedMultiOption);},}}
</script><style>.line {display: flex;justify-content: center;align-items: center;margin-top: 5%;}.item1 {display: flex;height: 80rpx;width: 85%;border: 2px solid rgb(144, 200, 226);}.left {width: 30%;font-size: 16px;display: flex;align-items: center;padding-left: 2%;}.right {font-size: 15px;color: rgb(83, 83, 83);width: 70%;/* border:1px solid black; */text-align: right;/* font-size: 18px; */padding-right: 2%;}.right text {font-size: 18px;margin-left: 2%;}.right input {width: 100%;/* border:1px solid black; */}.picker {width: 100%;text-align: right;height: 80rpx;display: flex;align-items: center;justify-content: flex-end;}
</style>
相关文章:
uni-app:实现普通选择器,时间选择器,日期选择器,多列选择器
效果 选择前效果 1、时间选择器 2、日期选择器 3、普通选择器 4、多列选择器 选择后效果 代码 <template><!-- 时间选择器 --><view class"line"><view classitem1><view classleft>时间</view><view class"right&quo…...
Unity3D仿星露谷物语开发17之空库存栏UI
1、目标 将库存栏放在游戏界面中,一般情况下角色居中展示时库存栏在底部,当角色位于界面下方时库存栏展示在顶部避免遮挡。 2、CanvasGroup组件 用于集中控制UI元素的透明度、交互性和射线投射行为。CanvasGroup的Alpha属性允许渐变效果,I…...
QT------模型/视图
一、模型/视图结构概述 基本原理: Qt 的模型/视图(Model/View)架构将数据的存储和显示分离,提高了代码的可维护性和复用性。模型(Model):负责存储和管理数据,提供数据的访问接口&am…...
Git - 记录一次由于少输入了一个命令导致的更改丢失
Git - 记录一次由于少输入了一个参数导致的更改丢失 前言 某晚我激情开发了几个小时,中途没有进行commit存档。准备睡觉时,我想创建一个新的分支并将今晚所有更改提交到新分支上(似乎应该开发时候就创建?)。 然后因…...
nodeJS下npm和yarn的关系和区别详解
一、命令对应关系 1. 初始化项目 操作npm 命令Yarn 命令初始化项目npm inityarn init跳过提问快速初始化npm init -yyarn init -y 2. 安装依赖 操作npm 命令Yarn 命令安装项目所有依赖npm installyarn install添加依赖npm install <package-name>yarn add <package…...
党员学习交流平台
本文结尾处获取源码。 本文结尾处获取源码。 本文结尾处获取源码。 一、相关技术 后端:Java、JavaWeb / Springboot。前端:Vue、HTML / CSS / Javascript 等。数据库:MySQL 二、相关软件(列出的软件其一均可运行) I…...
HTML5 文件上传(File Upload)详解
HTML5 文件上传(File Upload)详解 HTML5 提供了强大的文件上传功能,允许用户通过网页选择文件并上传到服务器。以下是关于文件上传控件的详细说明。 1. 基本的文件上传控件 使用 <input> 标签的 type"file" 属性可以创建一…...
1.2.1-2部分数据结构的说明02_链表
(1)链表数据结构: 概念: 将列表中相互连接的节点不连续的存储在内存中。与数据不同,我们无法再恒定时间内访问任何元组,如果遍历所有则花费时间与元素总数n成正比。插入和删除1个元素的时间复杂度都是O(n…...
vue elementUI Plus实现拖拽流程图,不引入插件,纯手写实现。
vue elementUI Plus实现拖拽流程图,不引入插件,纯手写实现。 1.设计思路:2.设计细节3.详细代码实现 1.设计思路: 左侧button列表是要拖拽的组件。中间是拖拽后的流程图。右侧是拖拽后的数据列表。 我们拖动左侧组件放入中间的流…...
linux上使用cmake编译的方法
一、hello 例程仅基于一个cpp文件 C文件或工程进行编译时可以使用g指令(需要对每一个程序和源文件分别使用g指令编译),当程序变大时,一个工程文件往往会包含很文件夹和源文件,这时我们需要的编译指令将越来越长&#…...
如何实现el-select多选下拉框中嵌套复选框并加校验不为空功能呢?
如何实现el-select多选下拉框中嵌套复选框并加校验不为空功能呢? 要实现的效果图选择部分品牌但不选选项效果问题概述实现方案el-select组件与el-checkbox组件无缝衔接给form表单加自定义校验规则 要实现的效果图 选择部分品牌但不选选项效果 问题概述 相信大家看到…...
源码理解 UE4中的 FCookStatsManager::FAutoRegisterCallback RegisterCookStats
官方文档:https://dev.epicgames.com/documentation/zh-cn/unreal-engine/API/Runtime/Core/ProfilingDebugging/FCookStatsManager文档中的注释: When a cook a complete that is configured to use stats (ENABLE_COOK_STATS), it will broadcast this…...
Android 根据内存大小显示MTP模式连接PC时的名称
项目有两种内存,要求根据连接电脑拷贝文件时的盘符名称根据内存大小显示不同名称。 frameworks/base/media/java/android/mtp/MtpDatabase.java//mh import android.app.ActivityManager; ...-894,7 896,19 public class MtpDatabase implements AutoCloseable {p…...
不只是mini-react第一节:实现最简单mini-react
项目总结构: ├─ 📁core │ ├─ 📄React.js │ └─ 📄ReactDom.js ├─ 📁node_modules ├─ 📁tests │ └─ 📄createElement.spec.js ├─ 📄App.js ├─ 📄in…...
前端路由layout布局处理以及菜单交互(三)
上篇介绍了前端项目部署以及基本依赖的应用,这次主要对于路由以及布局进行模块化处理 一、 创建layout模块 1、新建src/layout/index.vue <template><el-container class"common-layout"><!-- <el-aside class"aside">&l…...
小结:DNS,HTTP,SMTP,IMAP,FTP,Telnet,TCP,ARP,ICMP
DNS(Domain Name System,域名系统) 是互联网的重要组成部分,它负责将人类易读的域名(如 www.google.com)转换为机器可以识别的 IP 地址(如 142.250.72.206)。这一过程被称为域名解析…...
【C++】P2550 [AHOI2001] 彩票摇奖
博客主页: [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 💯前言💯题目描述输入格式:输出格式:输入输出样例: 💯题解思路1. 问题解析 💯我的实现实现逻辑问题分析 💯老…...
并发服务器框架——zinx
zinx框架 Zinx 是一个用 Go 语言编写的高性能、轻量级的 TCP 服务器框架,它被设计为简单、快速且易于使用。Zinx 提供了一系列的功能,包括但不限于连接管理、数据编解码、业务处理、负载均衡等,适用于构建各种 TCP 网络服务,如游戏…...
Unity 中计算射线和平面相交距离的原理
有此方法 能够计算射线和平面是否相交以及射线起点到平面交点的距离 代码分析 var dot Vector3.Dot(ray.direction, plane.normal);计算射线和平面法线的点积,如果大于等于0,则说明射线和平面没有相交,否则,说明射线和平面相交…...
浅谈棋牌游戏开发流程七:反外挂与安全体系——守护游戏公平与玩家体验
一、前言:为什么反外挂与安全这么重要? 对于任何一款线上棋牌游戏而言,公平性和玩家安全都是最重要的核心要素之一。如果游戏环境充斥着各式各样的外挂、作弊方式,不仅会毁坏玩家体验,更会导致游戏生态崩塌、口碑下滑…...
C# 类和继承(抽象类)
抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...
NFT模式:数字资产确权与链游经济系统构建
NFT模式:数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新:构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议:基于LayerZero协议实现以太坊、Solana等公链资产互通,通过零知…...
华硕a豆14 Air香氛版,美学与科技的馨香融合
在快节奏的现代生活中,我们渴望一个能激发创想、愉悦感官的工作与生活伙伴,它不仅是冰冷的科技工具,更能触动我们内心深处的细腻情感。正是在这样的期许下,华硕a豆14 Air香氛版翩然而至,它以一种前所未有的方式&#x…...
JVM虚拟机:内存结构、垃圾回收、性能优化
1、JVM虚拟机的简介 Java 虚拟机(Java Virtual Machine 简称:JVM)是运行所有 Java 程序的抽象计算机,是 Java 语言的运行环境,实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息,使得 Java 程序只需生成在 JVM 上运行的目标代码(字节码),就可以…...
Mysql中select查询语句的执行过程
目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析(Parser) 2.4、执行sql 1. 预处理(Preprocessor) 2. 查询优化器(Optimizer) 3. 执行器…...
【VLNs篇】07:NavRL—在动态环境中学习安全飞行
项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战,克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...
免费数学几何作图web平台
光锐软件免费数学工具,maths,数学制图,数学作图,几何作图,几何,AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...
AI语音助手的Python实现
引言 语音助手(如小爱同学、Siri)通过语音识别、自然语言处理(NLP)和语音合成技术,为用户提供直观、高效的交互体验。随着人工智能的普及,Python开发者可以利用开源库和AI模型,快速构建自定义语音助手。本文由浅入深,详细介绍如何使用Python开发AI语音助手,涵盖基础功…...
书籍“之“字形打印矩阵(8)0609
题目 给定一个矩阵matrix,按照"之"字形的方式打印这个矩阵,例如: 1 2 3 4 5 6 7 8 9 10 11 12 ”之“字形打印的结果为:1,…...
结构化文件管理实战:实现目录自动创建与归类
手动操作容易因疲劳或疏忽导致命名错误、路径混乱等问题,进而引发后续程序异常。使用工具进行标准化操作,能有效降低出错概率。 需要快速整理大量文件的技术用户而言,这款工具提供了一种轻便高效的解决方案。程序体积仅有 156KB,…...
