去哪儿项目总结（移动端）

项目主体：

cli2版本项目框架，数据信息为json模拟数据。引用Swiper 3轮播组件以及阿里巴巴矢量图标库。

首页：

头部为Herd组件输入框及阿里左箭头图标，display弹性布局。右侧地理位置数据为存储在vuex中动态变量，在位置页面点击选中当前地址时使用映射函数调用mutations中的方法进行传参（当前地址数据）并改变动态变量重新赋值

轮播图：引用swiper官网中文文档

安装：

npm i swiper@3.4.2 -S

在组件中引入插件：

import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';

在模板中：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">slider1</div>
    <div class="swiper-slide">slider2</div>
    <div class="swiper-slide">slider3</div>
  </div>
</div>

在mounted中初始化轮播图：

mounted(){
      var swiper = new Swiper('.swiper-container', {
        autoplay:5000,
        loop: true,
      });
    }

详情配置 swiper 3官方

可放在swiper 轮播图容器中，进行数据循环显示。可用v-show控制数据的显示和隐藏

城市选择页面：

主要功能：城市地址搜索，右侧点字母相应地址数据滚动显示

搜索：

将所有字母中数组的数据循环取出，在对当前数据进行搜索提取（傻瓜写法）

对绑定文本框的变量进行watch监听，使用filter，includes进行模糊搜索，将结果单独存放在新数组中进行渲染。创建空盒子用于数据渲染位置，用定位放到相应位置，v-if控制搜索结果有无是否显示与隐藏

 点击与滑动字母滚动显示相应地址数据：

使用Object.keys（提取数据）将数据中的字母提取出来，进行循环渲染。固定定位到页面左侧相应位置，点击字母获当前索引号。同时获取当前位置数据最外层盒子DOM元素通过【索引】获取当前点击字母对应数据盒子的DOM元素。再然后将其赋值给浏览器滚动距离。给渲染字母的元素添加三种移动端方法

同时在方法中    this.TouchStart = true 开启， Move方法滑动过程中获取右侧字母A距离滚动元素顶部距离放置在disY变量与鼠标距离滚动元素的距离放置在disX变量，然后disX-disY的结果除于每个字母的高度同时向下取整，每次滑动过程中得到的计算结果就是相应的下标，然后在判断条件索引大于等于零 且 索引小于循环渲染右侧字母的数组的长度条件中给每次包裹所有数据的大盒子滚动距离重新赋值每个相应的子母数据距离顶部的距离