1.直接在template中写:

// 直接显示选择的数据
// value 表示当前选中的项,change方式用于进行更改选中的项
<picker-view :value="value" indicator-class="picker-box" @change="bindChange" class="picker-view">
	// moreList表示要循环的数组
	<picker-view-column>
		<view class="item" v-for="(item,index) in moreList" :key="index">{{item}}</view>
	</picker-view-column>
</picker-view>

2.数据:

data() {
	return {
		moreList: ['选项一', '选项二', '选项三'], // 列表数组
		value: [1], // 默认选中选项二,必须是数组,数组里面是数字下标
	};
}

3.方法:

methods: {
	bindChange(e) {
		this.value = e.detail.value
	}
}

4.样式(很重要,如果不写,可能会显示不出):

.picker-view {
  height: 200rpx;
}
.item {
  height: 98rpx!important;
  text-align: center; // 文字水平居中
  font-size: 32rpx;
  line-height: 98rpx; // 让height = line-height文字就可垂直居中
  color: #333;
}
.picker-box {
	height: 98rpx!important;
}
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐