写在前面
接着前面的移动端效果的研究,这次来看看picker
选择器的实现原理
代码看这里:github
1. 核心解析
1.1 基本HTML结构
<!--
说明:
1. 类 picker-3d 是为了提供3d视角,如果不需要可以去掉
2. 类 picker-slot-absolute 在3d视角中需要加上,因为下面相对定位的 picker-items 是要相对父容器进行
transform的,如果不加,就会造成位移不正确
3. DOM中所有的style样式都是在初始化的时候加上的
-->
<div class="picker picker-3d">
<div class="picker-items">
<div class="picker-slot picker-slot-absolute" style="flex:1;">
<div class="picker-slot-wrapper" id="wrapper" style="height: 108px;">
<div class="picker-item picker-selected" style="height:36px;line-height: 36px">1981</div>
<!-- ... -->
<div class="picker-item" style="height:36px;line-height: 36px">1999</div>
</div>
</div>
</div>
<div class="picker-center-highlight" style="height:36px;margin-top:-18px;"></div>
</div>
1.2 初始化DOM
由于饿了么源码中的picker
是采用v-for
指令生成的DOM
,因此我这里只是简单的用javascript
来模拟一下DOM
的生成。
var el = document.querySelector('#wrapper');
var animationFrameId = null;
var currentValue;
var itemHeight = 36;
var visibleItemCount = 3;