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>
相关推荐
梦远青城1 小时前
C#地方门户网站 基于NET6.0、Admin.NET,uniapp,vue3,elementplus开源的地方门户网站项目
uni-app·开源·门户网站·地方生活网站·本地租房·本地找工作·东川本地生活
gnip2 小时前
链式调用和延迟执行
前端·javascript
SoaringHeart2 小时前
Flutter组件封装:页面点击事件拦截
前端·flutter
杨天天.2 小时前
小程序原生实现音频播放器,下一首上一首切换,拖动进度条等功能
前端·javascript·小程序·音视频
Dragon Wu2 小时前
React state在setInterval里未获取最新值的问题
前端·javascript·react.js·前端框架
Jinuss2 小时前
Vue3源码reactivity响应式篇之watch实现
前端·vue3
YU大宗师2 小时前
React面试题
前端·javascript·react.js
木兮xg2 小时前
react基础篇
前端·react.js·前端框架
ssshooter3 小时前
你知道怎么用 pnpm 临时给某个库打补丁吗?
前端·面试·npm
IT利刃出鞘3 小时前
HTML--最简的二级菜单页面
前端·html