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>
相关推荐
uhakadotcom31 分钟前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom35 分钟前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom36 分钟前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom1 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom1 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
LaoZhangAI2 小时前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端
ONE_Gua2 小时前
chromium魔改——CDP(Chrome DevTools Protocol)检测01
前端·后端·爬虫
LaoZhangAI2 小时前
2025最全Cherry Studio使用MCP指南:8种强大工具配置方法与实战案例
前端
咖啡教室2 小时前
前端开发日常工作每日记录笔记(2019至2024合集)
前端·javascript
溪饱鱼2 小时前
Nuxt3能上生产吗?
前端