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>