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>
相关推荐
hj5914_前端新手3 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法3 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku3 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode3 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu3 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu3 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu3 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu3 小时前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu3 小时前
【js篇】addEventListener()方法的参数和使用
前端·javascript
该用户已不存在3 小时前
6个值得收藏的.NET ORM 框架
前端·后端·.net