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

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、目标 将库存栏放在游戏界面中&#xff0c;一般情况下角色居中展示时库存栏在底部&#xff0c;当角色位于界面下方时库存栏展示在顶部避免遮挡。 2、CanvasGroup组件 用于集中控制UI元素的透明度、交互性和射线投射行为。CanvasGroup的Alpha属性允许渐变效果&#xff0c;I…...

QT------模型/视图

一、模型/视图结构概述 基本原理&#xff1a; Qt 的模型/视图&#xff08;Model/View&#xff09;架构将数据的存储和显示分离&#xff0c;提高了代码的可维护性和复用性。模型&#xff08;Model&#xff09;&#xff1a;负责存储和管理数据&#xff0c;提供数据的访问接口&am…...

Git - 记录一次由于少输入了一个命令导致的更改丢失

Git - 记录一次由于少输入了一个参数导致的更改丢失 前言 某晚我激情开发了几个小时&#xff0c;中途没有进行commit存档。准备睡觉时&#xff0c;我想创建一个新的分支并将今晚所有更改提交到新分支上&#xff08;似乎应该开发时候就创建&#xff1f;&#xff09;。 然后因…...

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…...

党员学习交流平台

本文结尾处获取源码。 本文结尾处获取源码。 本文结尾处获取源码。 一、相关技术 后端&#xff1a;Java、JavaWeb / Springboot。前端&#xff1a;Vue、HTML / CSS / Javascript 等。数据库&#xff1a;MySQL 二、相关软件&#xff08;列出的软件其一均可运行&#xff09; I…...

HTML5 文件上传(File Upload)详解

HTML5 文件上传&#xff08;File Upload&#xff09;详解 HTML5 提供了强大的文件上传功能&#xff0c;允许用户通过网页选择文件并上传到服务器。以下是关于文件上传控件的详细说明。 1. 基本的文件上传控件 使用 <input> 标签的 type"file" 属性可以创建一…...

1.2.1-2部分数据结构的说明02_链表

&#xff08;1&#xff09;链表数据结构&#xff1a; 概念&#xff1a; 将列表中相互连接的节点不连续的存储在内存中。与数据不同&#xff0c;我们无法再恒定时间内访问任何元组&#xff0c;如果遍历所有则花费时间与元素总数n成正比。插入和删除1个元素的时间复杂度都是O(n…...

vue elementUI Plus实现拖拽流程图,不引入插件,纯手写实现。

vue elementUI Plus实现拖拽流程图&#xff0c;不引入插件&#xff0c;纯手写实现。 1.设计思路&#xff1a;2.设计细节3.详细代码实现 1.设计思路&#xff1a; 左侧button列表是要拖拽的组件。中间是拖拽后的流程图。右侧是拖拽后的数据列表。 我们拖动左侧组件放入中间的流…...

linux上使用cmake编译的方法

一、hello 例程仅基于一个cpp文件 C文件或工程进行编译时可以使用g指令&#xff08;需要对每一个程序和源文件分别使用g指令编译&#xff09;&#xff0c;当程序变大时&#xff0c;一个工程文件往往会包含很文件夹和源文件&#xff0c;这时我们需要的编译指令将越来越长&#…...

如何实现el-select多选下拉框中嵌套复选框并加校验不为空功能呢?

如何实现el-select多选下拉框中嵌套复选框并加校验不为空功能呢&#xff1f; 要实现的效果图选择部分品牌但不选选项效果问题概述实现方案el-select组件与el-checkbox组件无缝衔接给form表单加自定义校验规则 要实现的效果图 选择部分品牌但不选选项效果 问题概述 相信大家看到…...

源码理解 UE4中的 FCookStatsManager::FAutoRegisterCallback RegisterCookStats

官方文档&#xff1a;https://dev.epicgames.com/documentation/zh-cn/unreal-engine/API/Runtime/Core/ProfilingDebugging/FCookStatsManager文档中的注释&#xff1a; When a cook a complete that is configured to use stats (ENABLE_COOK_STATS), it will broadcast this…...

Android 根据内存大小显示MTP模式连接PC时的名称

项目有两种内存&#xff0c;要求根据连接电脑拷贝文件时的盘符名称根据内存大小显示不同名称。 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

项目总结构&#xff1a; ├─ &#x1f4c1;core │ ├─ &#x1f4c4;React.js │ └─ &#x1f4c4;ReactDom.js ├─ &#x1f4c1;node_modules ├─ &#x1f4c1;tests │ └─ &#x1f4c4;createElement.spec.js ├─ &#x1f4c4;App.js ├─ &#x1f4c4;in…...

前端路由layout布局处理以及菜单交互(三)

上篇介绍了前端项目部署以及基本依赖的应用&#xff0c;这次主要对于路由以及布局进行模块化处理 一、 创建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&#xff08;Domain Name System&#xff0c;域名系统&#xff09; 是互联网的重要组成部分&#xff0c;它负责将人类易读的域名&#xff08;如 www.google.com&#xff09;转换为机器可以识别的 IP 地址&#xff08;如 142.250.72.206&#xff09;。这一过程被称为域名解析…...

【C++】P2550 [AHOI2001] 彩票摇奖

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 &#x1f4af;前言&#x1f4af;题目描述输入格式&#xff1a;输出格式&#xff1a;输入输出样例&#xff1a; &#x1f4af;题解思路1. 问题解析 &#x1f4af;我的实现实现逻辑问题分析 &#x1f4af;老…...

并发服务器框架——zinx

zinx框架 Zinx 是一个用 Go 语言编写的高性能、轻量级的 TCP 服务器框架&#xff0c;它被设计为简单、快速且易于使用。Zinx 提供了一系列的功能&#xff0c;包括但不限于连接管理、数据编解码、业务处理、负载均衡等&#xff0c;适用于构建各种 TCP 网络服务&#xff0c;如游戏…...

Unity 中计算射线和平面相交距离的原理

有此方法 能够计算射线和平面是否相交以及射线起点到平面交点的距离 代码分析 var dot Vector3.Dot(ray.direction, plane.normal);计算射线和平面法线的点积&#xff0c;如果大于等于0&#xff0c;则说明射线和平面没有相交&#xff0c;否则&#xff0c;说明射线和平面相交…...

浅谈棋牌游戏开发流程七:反外挂与安全体系——守护游戏公平与玩家体验

一、前言&#xff1a;为什么反外挂与安全这么重要&#xff1f; 对于任何一款线上棋牌游戏而言&#xff0c;公平性和玩家安全都是最重要的核心要素之一。如果游戏环境充斥着各式各样的外挂、作弊方式&#xff0c;不仅会毁坏玩家体验&#xff0c;更会导致游戏生态崩塌、口碑下滑…...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

linux 错误码总结

1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

如何在网页里填写 PDF 表格?

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...

libfmt: 现代C++的格式化工具库介绍与酷炫功能

libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库&#xff0c;提供了高效、安全的文本格式化功能&#xff0c;是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全&#xff1a…...