公司进入APP改版阶段了,会基于原生安卓开发,感觉没自己什么事了。只能看看原型图,想想前端技术如何实现某某功能。。。
滑动选择器在APP上是很常见的组件了,最初是 IOS 上的组件,之后就出现 Android 版的自定义实现,称为 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