移动端效果之IndexList

写在前面

接着前面的移动端效果讲，这次讲解的的是IndexList的实现原理。效果如下：

代码请看这里：github

移动端效果之swiper

移动端效果之picker

移动端效果之cellSwiper

1. 核心解析

总体来说的原理就是当点击或者滑动右边的索引条时，通过获取点击的索引值来使左边的内容滑动到相应的位置。其中怎样滑动到具体的位置，看下面分解：

1.1 基本html代码

<div class="indexlist">
    <ul class="indexlist-content" id="content">
        <!-- 需要生成的内容 -->
    </ul>
    <div class="indexlist-nav" id="nav">
        <ul class="indexlist-navlist" id="navList">
            <-- 需要生成的索引条 -->
        </ul>
    </div>