效果
代码
<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>