uni-app picker-view 简单使用一例

文档链接

https://uniapp.dcloud.io/component/picker-view.html

源码

<template>
	<view class="u-p-30">
		<u-divider>{{edus[current].label}}</u-divider>

		<picker-view :indicator-style="`height:50px;`" :value="[current]" @change="change" class="picker-view">
			<picker-view-column>
				<view class="item" v-for="(item,index) in edus" :key="index">{{item.label}}</view>
			</picker-view-column>
		</picker-view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				edus: [
					{ value: 1, label: '初中' }
					, { value: 2, label: '高中' }
					, { value: 3, label: '中技' }
					, { value: 4, label: '大专' }
					, { value: 5, label: '本科' }
					, { value: 6, label: '研究生' }
				, ]
				, current: 1
			}
		}
		, methods: {
			change(e) {
				this.current = e.detail.value[0]
			}
		}
	}
</script>

<style scoped>
	.picker-view {
		width: 100%;
		height: 500rpx;
		margin-top: 40rpx;
		background-color: #e0ecf8;
	}

	.picker-view .item {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>

预览图