uni-app：实现简易自定义下拉列表

效果 

代码

扩展-下拉列表位置

如果下拉列表下方有内容，当下拉列表的内容出现时，会造成下拉列表占据一定的高度，将内容挤压至下拉列表的下方（正常是下拉列表的内容可以覆盖内容，而不占据一定高度）

效果

被挤压的效果

 正常效果：由于没设置背景色，现在看着就是这样的效果

更换背景色就展示出希望得到的效果

核心代码

一、在需要出现下拉列表的元素上设置相对定位(position: relative)，用于作为下拉列表的参考位置。

.dropdown-trigger { position: relative; }

二、下拉列表使用绝对定位(position: absolute)，并设置top或bottom属性来控制其在参考元素上方或下方的位置。

.dropdown-list { position: absolute;}

完整代码

扩展-下拉列表选中颜色改变

效果

核心代码

三目运算给出样式

:class="{selected: selectedItem === item}"

完整代码