uniapp 下拉菜单 picker

模拟下拉下单
原样式示例：

1、第一种：修改为自己需要的样式及功能：

<view class="items select-box">
	<view class="items-text">是否已告知物业(必填)</view>
	<picker @change="bindPickerChange" :value="index" :range="array" class="picker-box" v-if="pickerShow">
		<input class="select-input" type="text" placeholder="请选择是否已告知物业" v-if="index == -1" disabled="disabled"></input>
		<view class="select-input" type="text" v-else>{{array[index]}}</view>
	</picker>
	<view class="icon-img">
		<!-- 下拉角标图片 -->
		<image src="../../static/img/select-icon.png"></image>
	</view>
</view>

data() {
	return {
		index: -1,
		array: ['是', '否'],
	}
},


methods: {
	// 下拉列表
	bindPickerChange: function(e) {
		console.log('picker发送选择改变，携带值为', e.detail.value)
		this.index = e.detail.value
	},
},

<style>
/* 下拉列表 start */
.select-box{
	position: relative;
}
.picker-box{
	width:100%;
	height: 88rpx;
	line-height: 88rpx;
	border-radius: 10rpx;
	box-sizing:border-box;
}
.select-input{
	width:100%;
	height: 88rpx;
	line-height: 88rpx;
	border-radius: 10rpx;
	border: 1rpx solid #BDBDBD;
	padding-left: 22rpx;
	box-sizing:border-box;
}
.icon-img{
	position: absolute;
	top: 84rpx;
	right: 18rpx;
	width: 18rpx;
	height: 18rpx;
}
.icon-img image{
	width:100%;
	height:100%;
}
/* 下拉列表 end */
</style>

2、第二种

<view class="other-item">
	<view>选择种类</view>
	<view class="right-box">
		<picker @change="bindPickerChange" :value="index" :range="array">
			<view v-if="index == -1">请选择种类</view>
			<view v-else>{{array[index]}}</view>
		</picker>
		<view class="right-icon">
			<image src="../../static/img/more.png"></image>
		</view>
	</view>
</view>


data() {
	return {
		index: -1,
		array: ['1', '2', '3'],
	}
},


methods: {
	// 下拉列表
	bindPickerChange: function(e) {
		console.log('picker发送选择改变，携带值为', e.detail.value)
		this.index = e.detail.value
	},
},

<style>
.other-item{
	font-size: 30rpx;
	color: #666666;
	padding-top: 12rpx;
	display: flex;
	justify-content:space-between;
	align-items: center;
	margin-bottom: 17rpx;
}
.right-box{
	display: flex;
	align-items: center;
}
.right-icon{
	width: 16rpx;
	height: 28rpx;
	margin-left: 24rpx;
}
.right-icon image{
	width: 100%;
	height: 100%;
}
</style>