Skip to content

双列选择器

以下是双列选择器的简单用法

vue
<template>
	<view class="content">
		<picker mode="multiSelector" :range="arr" @change="onChange">
			<view>{{arr[0][month]}}--{{arr[1][date]}}</view>
		</picker>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				arr:[
					['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
					['1号','2号','3号','4号','5号','6号','7号','8号','9号']
				],
				month:0,
				date:0
			}
		},
		methods: {
			onChange(e){
				 this.month = e.detail.value[0];
				 this.date = e.detail.value[1]
			}
		}
	}
</script>
<template>
	<view class="content">
		<picker mode="multiSelector" :range="arr" @change="onChange">
			<view>{{arr[0][month]}}--{{arr[1][date]}}</view>
		</picker>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				arr:[
					['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
					['1号','2号','3号','4号','5号','6号','7号','8号','9号']
				],
				month:0,
				date:0
			}
		},
		methods: {
			onChange(e){
				 this.month = e.detail.value[0];
				 this.date = e.detail.value[1]
			}
		}
	}
</script>

程序员小洛文档