移动端效果之Picker

写在前面

接着前面的移动端效果的研究，这次来看看picker选择器的实现原理

移动端效果之Swiper

移动端效果之CellSwiper

代码看这里：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;