uniapp的picker组件demo

一、效果图

1.普通选择器 

 

2.多列选择器 

3.日期选择器 

4.时间选择器 

5.省市区选择器

二、代码

<template>
	<view>

		<!-- 普通选择器(普通数组) -->
		<view class="sectionBox">
			<view class="sectionType">普通选择器(普通数组)</view>
			<picker @change="pickerChange" :value="index" :range="array">
				<view class="picker">
					当前选择：{{array[index]}}
				</view>
			</picker>
		</view>

		<!-- 普通选择器(json格式数组) -->
		<view class="sectionBox">
			<view class="sectionType">普通选择器(json格式数组)</view>
			<picker @change="objectPickerChange" :value="objectIndex" :range="objectArray" range-key="name">
				<view class="picker">
					当前选择：{{objectArray[objectIndex].name}}
				</view>
			</picker>
		</view>

		<!-- 多列选择器 -->
		<view class="sectionBox">
			<view class="sectionType">多列选择器：</view>
			<picker mode="multiSelector" @change="multiPickerChange" @columnchange="multiPickerColumnChange"
				:value="multiIndex" :range="multiArray">
				<view class="picker">
					当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}
				</view>
			</picker>
		</view>

		<!-- 日期选择器 -->
		<view class="sectionBox">
			<view class="sectionType">日期选择器：</view>
			<picker mode="date" :value="date" @change="dateChange">
				<view class="picker">
					当前选择: {{date}}
				</view>
			</picker>
		</view>

		<!-- 时间选择器 -->
		<view class="sectionBox">
			<view class="sectionType">时间选择器：</view>
			<picker mode="time" :value="time" start="09:01" end="21:01" @change="timeChange">
				<view class="picker">
					当前选择: {{time}}
				</view>
			</picker>
		</view>

		<!-- 省市区选择器 -->
		<view class="sectionBox">
			<view class="sectionType">省市区选择器：</view>
			<picker mode="region" @change="regionChange" :value="region">
				<view class="picker">
					当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
				</view>
			</picker>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 普通选择器(普通数组)
				array: ['香蕉', '苹果', '葡萄', '蓝莓'],
				index: 0, //默认索引

				// 普通选择器(json格式数组) 
				objectArray: [{
						id: 0,
						name: '语文'
					},
					{
						id: 1,
						name: '数学'
					},
					{
						id: 2,
						name: '历史'
					},
					{
						id: 3,
						name: '地理'
					}
				],
				objectIndex: 0, //默认索引

				// 多列选择器
				multiArray: [
					['音频', '视频'],
					['mp3', '评书']
				], //二维数组，长度是多少是几列
				multiIndex: [0, 0],

				// 日期选择器：
				date: '2023-06-06',

				// 时间选择器：
				time: '12:01',

				// 省市区选择器
				region: ['请选择', '请选择', '请选择'],
			}
		},
		methods: {
			// 普通选择器(普通数组)
			pickerChange(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value;
			},

			// 普通选择器(json格式数组)
			objectPickerChange(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.objectIndex = e.detail.value;
			},

			// 多列选择器
			multiPickerChange(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.multiIndex = e.detail.value;
			},

			multiPickerColumnChange(e) {
				console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
				if (e.detail.column == 0) { //第1列
					if (e.detail.value == 0) { //音频
						this.multiArray = [
							['音频', '视频'],
							['mp3', '评书']
						];
					};
					if (e.detail.value == 1) { //视频
						this.multiArray = [
							['音频', '视频'],
							['电影', '电视剧']
						];
					};
				};
			},
			
			// 日期选择器
			dateChange(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.date = e.detail.value;
			},

			// 时间选择器
			timeChange(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.time = e.detail.value;
			},

			// 省市区选择器
			regionChange(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.region = e.detail.value;
			}
		}
	}
</script>

<style scoped>
	.sectionBox {
		margin-bottom: 40rpx;
	}

	.sectionType {
		font-size: 30rpx;
		font-weight: bold;
		overflow: hidden;
		margin-bottom: 20rpx;
	}
</style>