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

效果

选择前效果

1、时间选择器

2、日期选择器

3、普通选择器

4、多列选择器

选择后效果

代码

html 复制代码
<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>
相关推荐
快乐就是哈哈哈9 分钟前
new Map 这么好用,你为什么不用?是不喜欢吗?🌸
前端
洞窝技术11 分钟前
前端安全那些事儿:防范与应对策略
前端·安全
哀木14 分钟前
当你在 2025 做暗色方案
前端
brzhang16 分钟前
搞懂 Session、Cookie、JWT、SSO 到 OAuth 2.0:你的登录认证还好吗?
前端·后端·架构
魔法少女樱17 分钟前
如何在idea中写spark程序
前端·javascript·ajax
三思而后行,慎承诺19 分钟前
npm、pnpm 和 yarn 包管理工具
前端·npm·node.js
wuhen_n39 分钟前
CSS元素动画篇:基于当前位置的变换动画(三)
前端·css·html·css3·html5
brzhang42 分钟前
告别面条代码!用可视化编程 Flyde 给你的 Node.js/Web 应用逻辑解解耦
前端·后端·架构
brzhang1 小时前
还在手撸线程?搞懂这 6 大多线程设计模式,并发编程不再难!
前端·后端·架构
拖孩1 小时前
【Nova UI】十四、打造组件库之按钮组件(下):按钮组组件的构建之旅
前端·javascript·vue.js