快捷導(dǎo)航

uniapp中的picker選擇器的幾種使用場(chǎng)景

更新時(shí)間：2022年05月09日 15:22:24 作者：~疆

本文主要介紹了uniapp中的picker選擇器的幾種使用場(chǎng)景，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一、普通選擇器

<template>
	<view>
		<picker @change="bindPickerChange" :value="index" :range="array" range-key="name">
			<view style="padding: 20rpx;background-color: white;">{{ array[index].name }}</view>
		</picker>
	</view>
</template>
<script>
export default {
	data() {
		return {
			array: [{ name: '中國(guó)' }, { name: '美國(guó)' }, { name: '巴西' }, { name: '日本' }],
			index: 2,
		};
	},
	methods: {
		bindPickerChange: function(e) {
			this.index = e.detail.value;
		}
	}
};
</script>

二、多列選擇器

<template>
	<view>
		<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
			<view style="background-color: white;">
				{{ multiArray[0][multiIndex[0]] }}，
				{{ multiArray[1][multiIndex[1]] }}，
				{{ multiArray[2][multiIndex[2]] }}
			</view>
		</picker>
	</view>
</template>
<script>
export default {
	data() {
		return {
			multiArray: [['亞洲', '歐洲'], ['中國(guó)', '日本'], ['北京', '上海', '廣州']],
			multiIndex: [0, 0, 0]
		};
	},
	methods: {
		bindMultiPickerColumnChange: function(e) {
			this.multiIndex[e.detail.column] = e.detail.value;
			switch (e.detail.column) {
				case 0: //拖動(dòng)第1列
					switch (this.multiIndex[0]) {
						case 0:
							this.multiArray[1] = ['中國(guó)', '日本'];
							this.multiArray[2] = ['北京', '上海', '廣州'];
							break;
						case 1:
							this.multiArray[1] = ['英國(guó)', '法國(guó)'];
							this.multiArray[2] = ['倫敦', '曼徹斯特'];
							break;
					}
					this.multiIndex.splice(1, 1, 0);
					this.multiIndex.splice(2, 1, 0);
					break;
				case 1: //拖動(dòng)第2列
					switch (
						this.multiIndex[0] //判斷第一列是什么
					) {
						case 0:
							switch (this.multiIndex[1]) {
								case 0:
									this.multiArray[2] = ['北京', '上海', '廣州'];
									break;
								case 1:
									this.multiArray[2] = ['東京', '北海道'];
									break;
							}
							break;
						case 1:
							switch (this.multiIndex[1]) {
								case 0:
									this.multiArray[2] = ['倫敦', '曼徹斯特'];
									break;
								case 1:
									this.multiArray[2] = ['巴黎', '馬賽'];
									break;
							}
							break;
					}
					this.multiIndex.splice(2, 1, 0);
					break;
			}
			this.$forceUpdate();
		}
	}
};
</script>

三、時(shí)間選擇器

<template>
	<view>
		<picker mode="time" :value="time" :start="minTime" :end=maxTime @change="bindTimeChange">
			<view style="background-color: white;">{{ time }}</view>
		</picker>
	</view>
</template>
<script>
export default {
	data() {
		return {
			time: '12:01',
			minTime:'09:01',
			maxTime:"21:01"
		};
	},
	methods: {
		bindTimeChange: function(e) {
			this.time = e.detail.value;
		}
	}
};
</script>

四、日期選擇器

<template>
	<view>
		<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
			<view style="background-color: #07C160;">{{ date }}</view>
		</picker>
	</view>
</template>
<script>
function getDate(type) {
	const date = new Date();
 
	let year = date.getFullYear();
	let month = date.getMonth() + 1;
	let day = date.getDate();
 
	if (type === 'start') {
		year = year - 10;
	} else if (type === 'end') {
		year = year + 10;
	}
	month = month > 9 ? month : '0' + month;
	day = day > 9 ? day : '0' + day;
 
	return `${year}-${month}-${day}`;
}
export default {
	data() {
		return {
			date: getDate({
				format: true
			}),
			startDate: getDate('start'),
			endDate: getDate('end'),
		};
	},
	methods: {
		bindDateChange: function(e) {
			this.date = e.detail.value;
		}
	}
};
</script>

到此這篇關(guān)于uniapp中的picker選擇器的幾種使用場(chǎng)景的文章就介紹到這了,更多相關(guān)uniapp picker選擇器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: