关于小程序下拉组件的简单实现

由于小程序本身不提供select下拉组件，而项目使用的ui框架下拉又是弹窗形式，所以运用css3的知识来简单实现下

*由于在小程序中使用ul li会被解析成.ul .li的class,所以直接使用view来写*

实现前：
1.下拉组件分成两块：横向排列的展示部分和点击事件响应的显示部分
2.横向展示使用flexbox排列
3.点击显示的部分使用position:absolute排布，再使用transform:translateY(1)加一点动态效果

下面是代码部分：
view:

<template>
	<view class="ul_box">
		<view class="li_item">
			地区级别
			<view class="ul_item">
				<view class="li_port">省</view>
				<view class="li_port">市</view>
				<view class="li_port">区</view>
				<view class="li_port">县</view>
			</view>
			<u-icon name="arrow-up-fill" color="#999" size="28" class="icon"></u-icon>
		</view>
		<view class="li_item">
			地区区域
			<view class="ul_item">
				<view class="li_port">广州</view>
				<view class="li_port">上海</view>
				<view class="li_port">武汉</view>
				<view class="li_port">南昌</view>
			</view>
			<u-icon name="arrow-up-fill" color="#999" size="28" class="icon"></u-icon>
		</view>
		<view class="li_item">
			新闻
			<view class="ul_item">
				<view class="li_port">海外新闻</view>
				<view class="li_port">国内时事</view>
				<view class="li_port">社区防疫</view>
			</view>
			<u-icon name="arrow-up-fill" color="#999" size="28" class="icon"></u-icon>
		</view>
	</view>
</template>

css:

<style lang="scss" scoped>
.ul_box{
	display: flex;
	border-bottom: 1rpx solid #ececec;
	.li_item{
		flex: 1;
		text-align: center;
		position: relative;
		line-height: 80rpx;
		height: 80rpx;
		font-size: 28rpx;
		.icon{
			position: absolute;
			right: 10rpx;
			top: 50%;
			transform: translateY(-50%);
		}
		.ul_item{
			position: absolute;
			left: 0;
			top: 80rpx;
			width: 100%;
			transition: all 0.5;
			transform: scaleY(0);
			transform-origin: 0% 0%;
			border: 1rpx solid #ececec;
			.li_port{
				width: 100%;
				text-align: center;
				position: relative;
				line-height: 70rpx;
				height: 70rpx;
			}
		}
		&:hover{
			.ul_item{
				transform: scaleY(1);
			}
		}
	}
}
</style>

最终实现的结果如示：

注意：

transition: all 0.5s;//过渡效果，持续0.5s
transform: scaleY(0);//径向缩小0倍
transform-origin: 0% 0%;//设置圆点到左上角，默认(50%，50%)中心点