uniapp中picker(一)

最新推荐文章于 2024-03-21 20:52:50 发布

暖风阵阵

最新推荐文章于 2024-03-21 20:52:50 发布

阅读量868

点赞数

分类专栏： uniapp 文章标签： javascript uni-app

本文链接：https://blog.csdn.net/weixin_46899191/article/details/121650805

版权

uniapp 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

uniapp官方文档组件picker

//(1)html
<view class="flex-view">
	<view style="color:grey;">性别</view>
	<picker mode = selector  :value="index" :range="array" @change="bindPickerChange">
			<view class="uni-input">{{array[index]}}</view>
	</picker>
</view>

//(2)js
<script>
	import customPicker from '@/components/custom-picker.vue';
	export default{
		components: {
			customPicker
		},
		data() {
			return{
				array: ['女', '男', '未选择'],
				index: 0,
			}
		},
		methods:{
			bindPickerChange(e) {
			 	this.index = e.target.value
			},
		},
	}
</script>

//(3)css
.flex-view{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 20rpx;
	padding:10rpx 20rpx;
	border: 1rpx solid #C0C0C0;
	border-radius: 10rpx;
}