公司进入APP改版阶段了,会基于原生安卓开发,感觉没自己什么事了。只能看看原型图,想想前端技术如何实现某某功能。。。

滑动选择器在APP上是很常见的组件了,最初是 IOS 上的组件,之后就出现 Android 版的自定义实现,称为 WheelView。对于前端技术来讲,实现也并不困难。

wheelview
wheelview

布局是解决复杂组件效果的关键,要充分结合css去思考。

选中项和未选中项的样式不一致是首先要解决的问题,最终想到了两种解决方案。

Plan A

<div class="wheelview">
<div class="action">
<a href="javascript:;" class="fl">取消</a>
<a href="javascript:;" class="fr">确定</a>
</div>
<div class="wrap" id="wrap">
<ul class="backlist list">
<li>一年-两年</li>
<li>两年-三年</li>
<li>三年-五年</li>
<li>五年-八年</li>
<li>八年-十年</li>
</ul>
<div class="front">
<ul class="list" id="front">
<li>一年-两年</li>
<li>两年-三年</li>
<li>三年-五年</li>
<li>五年-八年</li>
<li>八年-十年</li>
</ul>
</div>
</div>
</div>

使用两个列表来显示,一个列表作为背景显示所有项;另一个列表置于顶层,固定为一行的高度显示选中项。
需要处理两个列表的同步滚动。

Plan B

<div class="wheelview">
<div class="action">
<a href="javascript:;" class="fl">取消</a>
<a href="javascript:;" class="fr">确定</a>
</div>
<div class="wrap" id="wrap">
<ul class="list">
<li>一年-两年</li>
<li>两年-三年</li>
<li>三年-五年</li>
<li>五年-八年</li>
<li>八年-十年</li>
</ul>
<div class="top"></div>
<div class="bottom"></div>
</div>
</div>

单列表显示,再添加两个同级的遮罩层设置透明色渐变,分别覆盖于列表上下,保留中间一项的视区。

根据不同应用场景,两种方案各有千秋。

Plan A :适用于选中项与普通项样式差别大的场景。比如选中项要求为蓝色,普通项为灰色,已经不在一个色系了。
Plan B :单列表结构更清晰,节省标签。亮点就是遮罩层的渐变背景色。

最后只剩下实现滚动效果了,为防掉坑,引用了 iscroll.js

Code