微信公众号开发

微信小程序--uni-app中使用picker-view

本文主要是介绍微信小程序--uni-app中使用picker-view,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

1.直接在template中写:

// 直接显示选择的数据
// value 表示当前选中的项,change方式用于进行更改选中的项
<picker-view :value="value" @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: 0, // 默认选中近3年
	};
}

3.方法:

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

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

.uni-picker-view {
   display: block;
}
这篇关于微信小程序--uni-app中使用picker-view的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!