uni-app：实现picker下拉列表

最新推荐文章于 2024-03-21 16:07:36 发布

25号底片~

最新推荐文章于 2024-03-21 16:07:36 发布

阅读量1.3k

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_46001736/article/details/133267767

版权

uni-app 专栏收录该内容

88 篇文章 2 订阅

订阅专栏

效果

代码

<template>
	<view class="container">
		<picker name="info" @change="bindPickerChange9" :value="index9" :range="selectDatas9">
			<view class="right">
				<view class="right_left">{{ selectDatas9[index9] }}
				</view>
				<view class="right_right">></view>
			</view>
		</picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index9: 0, //选择的下拉列表下标，默认为第一项,
				selectDatas9: ['数据1', '数据2', '数据3'], //下拉数组
				info: '', //选择的下拉数据	
			}
		},
		onLoad() {

		},
		methods: {
			//下拉列表选择模式
			bindPickerChange9: function(e) {
				// console.log('picker发送选择改变，携带下标为', e.detail.value)
				// console.log('picker发送选择改变，携带值为' + this.selectDatas9[e.detail.value])
				this.info = this.selectDatas9[e.detail.value]; //更新选择的数据
				this.index9 = e.detail.value; //更新选择的下拉下标
				// console.log(this.info)			
			},
		}
	}
</script>

<style>
	.right {
		color: rgb(134, 133, 133);
		display: flex;
		border:1px solid black;
		padding:2%;
	}

	.right_left {
		width: 90%;
	}

	.right_right {
		width: 10%;
		text-align: right;
		color: #808080;
	}
</style>