uni-app：实现picker下拉列表

效果

代码 

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