uni——picker普通选择器

案例演示

代码

<picker mode="selector" :value="hobbyValue" :range="hobbyList" range-key="name" @change="chooseHobby">
	{
   
   {hobbyValue?hobbyValue:'请下拉选择'}}
	<image src="/static/images/selectedImg.png" mode="aspectFill" class="selectedImg"></image>
</picker>

data() {
    
    
	return {
    
    
		// 客户爱好
		hobbyList: [{
    
    
			id: '1',
			name: '红色',
		}, {
    
    
			id: '2',
			name: '绿色',
		}, {
    
    
			id: '3',
			name: '蓝色',
		}],
		hobbyValue: '',
	}
},
methods:{
    
    
	// 客户爱好
	chooseHobby(e) {
    
    
		// console.log(e);
		let key = e.detail.value
		this.hobbyValue = this.hobbyList[key].name
		console.log("爱好",this.hobbyValue);
	},
}

网址

https://uniapp.dcloud.net.cn/component/picker.html#%E6%99%AE%E9%80%9A%E9%80%89%E6%8B%A9%E5%99%A8