实现city和city首字母对应滚动

实现 左边（由首字母排列的city）和 右边 字母 相对应滚动

一： 实现点击不同的字母时（右边），左边就会滚动跳转到对应的字母列表

实现两个子组件之间传值

• 左边是List子组件

• 右边是Alphabet子组件

传值步骤：

1. 给Alphabet子组件字母绑定点击事件

2. 在点击事件中用 $emit(‘触发事件名称’,参数) 触发一个事件（参数就是点击的字母），并且在父组件中对应的子组件标签中 绑定触发事件 对应的方法（methods中）

   【
   给一个元素绑定点击事件时
   点击函数的参数e代表的是点击的这个点的信息 （ 如：点击的点在浏览器					中的x、y值)
   
   e.target是点击的元素标签
   
   e.target.innerText就是标签包裹的信息（D）
   】
   

3. 在父组件data中定义一个变量（val）来存放参数（点击的字母），在方法中把传递过来的参数赋值给这个变量

4. 给List子组件在父组件中的子组件标签绑定属性（val），（父组件给子组件传值），在List子组件中用props来获取 val

5. 在List子组件中的钩子函数 watch 中 监听 val

6. 当val发生变化的时候，当val非空的时候获取首字母为 val 的元素

    **获取方法：**
     在首字母的元素中绑定一个ref属性，用来绑定当前首字母
    `<div class="area" v-for="(item, key) in cities" :key="key" :ref="key">  `
   

7. 获取这个元素并且使这个首字母 等于 val ，然后利用scroll.scrollToElement() 方法，使页面滚动到指定的模块（当前元素）
   element[0]就是当前元素

val: function () {
  if (this.val) {
     const element = this.$refs[this.val]
    // console.log(element)  是一个数组，第一项是我们想要的值
      this.scroll.scrollToElement(element[0])
   }
 }

二：当手指字母列表滚动的过程 左侧列表显示为 -> 所在首字母列表

首先先准备好字母列表的数组（val）

1. 绑定事件

   将触摸事件分为三个阶段	
   	touchstart      //开始
   	touchmove       //过程
   	touchedd        //结束
   	
   在data中定义一个flag （布尔值）
   在开始阶段设置flag为 true
   在结束阶段设置flag为 false
   确保只有在touchmove阶段 flag为 true时才进行变化
   

2. 确定index（val的下标）

   然后把val[index]作为参数触发change事件，进行改变字母列表的位置
   确定index：
   确定字母A的位置的offestTop    （startHight）
   确定正在touch的字母的clientY    （touchHight）
   index = （touchHight - startHight - 多出来的部分）/ 20（每个字母的大小）
   

代码如下：

data: function () {
   return {
     flag: false
   }
},
methods: {
   handleAlphabetClick: function (e) {
    this.$emit('change', e.target.innerText)
   },
   handelTouchStart: function () {
     this.flag = true
   },
   handelTouchMove: function (e) {
     if (this.flag) {
       var touchHight = e.touches[0].clientY - 150
       var index = Math.floor(touchHight / 20)
      this.$emit('change', this.val[index])
     }
  },
  handelTouchEdd: function () {
    this.flag = false
  }
 },
 computed: {
    val: function () {
      const val = []
      for (let i in this.cities) {
        val.push(i)
      }
      return val
    }
  }