公司进入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