uniapp封装的下拉框组件

uniapp封装的下拉框组件,纯原生
整体图:
uniapp封装的下拉框组件_第1张图片

背景:
因为uniapp没有提供很方便的下拉框组件,所以想着自己封装一个,结果出人意料的好用

实现功能:
1、动态计算下拉框标题个数,动态分配样式,以实现等宽
2、点击时,小箭头会有旋转动画
3、实现遮罩层,当下拉框打开,其余部分全部遮罩层显示
4、下拉框打开,有动画效果,徐徐打开
5、动态计算下拉框高度,会根据下拉框的内容个数计算总高度

使用方式:

// 渲染层直接使用
dropList>
// script层import引入组件
import dropList from '../../component/dropList/drop-list'
// data里上传数据。可以通过后台动态获取
// title和list要一一对应,不然就QaQ了
dropTitle:['项目类型', '居位名称', '项目周期', '赏分范围'],
dropList:[['附近'], ['附近', '买菜'], ['附近', '买菜', '游荡'], ['附近']],

下载链接:
uniapp封装的下拉框组件

你可能感兴趣的:(vue,js,css,html5)