uniapp中picker(一)

最新推荐文章于 2024-09-15 08:44:20 发布

原创最新推荐文章于 2024-09-15 08:44:20 发布 · 967 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #uni-app

uniapp 专栏收录该内容

11 篇文章

订阅专栏

该博客介绍了如何在uniapp中实现一个选择器组件。通过HTML、JS和CSS代码展示了如何创建一个显示性别并可选择的picker，当选择项改变时会触发`bindPickerChange`事件更新显示值。

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;
}