Vue实现类似通讯录功能（下）

字母索引滚动监听

修改字母索引组件，绑定三个touch事件，分别是touchStart、touchMove、touchEnd。

定义三个touch事件

只有当touchstart之后，才执行touchmove里的内容，所以在data里定义一个标识位touchStatus，默认值为false，
当手指触摸的时候，标识位的值为true，结束滑动的时候，标识位的值为false。只有当标识位的值为true的时候，才去执行move事件的处理。

然后要做的一件事就是，当我们在字母索引处上下滑动的时候，现在所在的位置是第几个字母。

主要是思路是：
1.获得A字母距离顶部的高度
2.滑动的时候看下当前手指位置距离顶部的高度
3.前两个做一个差值，算出当前手指位置和A字母顶部的差值，
然后除以每个字母的高度，就能算出当前是第几个字母了
4.然后取这个字母触发change事件给外部

如果想根据下标，找到下标对应的字母的话，首先得有个数组存储字母的列表。但是现在cities是个对象，并不是个数组，所以我们需要一个数组。
在computed计算属性中定义一个letters

构建letters

这样就构建出了一个名字叫做 letters的计算属性，它的内容大概是这样的 ['A', 'B', 'C', 'D',...]，返回的结果就是这样的数组。
有了这个数组，之前字母索引处的循环也可以相应的改一下，之前是做 cities对象的循环。现在可以直接根据这个数组循环。

修改了一下下

获取A字母距离顶部的高度

首先绑定一下dom元素：

获取dom元素

然后在 move的时候，如果此时 touchStatus为·true·,开始执行以下代码，定义一个 startY，A字母的顶部高度是它的 offsetTop，那么就这样写 this.$refs['A'][0].offsetTop（ this.$refs['A']是个数组，必须取下标0才能拿到它的 dom元素，)

获取A字母距离红色区域下沿的高度

我是浏览器测试图：

我是浏览器测试图

此时在索引处拖动的时候，控制台不停的打印一个值，这个值就是A字母顶部距离红色区域最下沿的高度（红色区域是指的搜索框）。

我是示意图

获取当前手指距离顶部的高度并做差值

计算手指的位置

touch事件有个参数 e，事件对象里 它会有一个 touches的数组，第0项表示的是手指的信息，这里获取到手指的 clientY的值。
为啥这里是 clientY?为啥不和上面的一样是 offsetTop？
让我们走进 e.touches

image.png

这里可以看到 e.touches里这么一些属性。

####这里是百度的touch事件的科普
在移动端页面开发时，常常会用到touch事件，
比如左滑右滑的轮播等。常用的触摸事件有touchstart,touchmove,touchend。

每个事件包含下面三个用于跟踪虎摸的属性：
　　touches：表示当前跟踪的触摸操作的touch对象的数组。
　　targetTouches：特定于事件目标的Touch对象的数组。
　　changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。

 每个touch事件包含下面的属性：
　　clientX：触摸目标在视口中的x坐标。
　　clientY：触摸目标在视口中的y坐标。
　　identifier：标识触摸的唯一ID。
　　pageX：触摸目标在页面中的x坐标。
　　pageY：触摸目标在页面中的y坐标。
　　screenX：触摸目标在屏幕中的x坐标。
　　screenY：触摸目标在屏幕中的y坐标。
　　target：触摸的DOM节点目标。

打印一波

打印一下这3个Y的值， clientY和 pageY在这里是相等的，但是 screenY与它们不同，保险起见，这里最好用的是 clientY。

clientY被分割了

clientY的距离是这样的，所以如果想算出手指距离红色区域最下沿的高度，得用这个 clientY - 红色区域的高度（一个搜索框+标题栏部分），这部分的高度在我这里是160。
所以才有 const touchY = e.touches[0].clientY - 160

算出是第几个字母

得到这部分高度之后，用这部分高度 - 第一步得到的 高度，算差值。这个差值是当前手指的高度 到 A字母的高度，然后用这个差值 除以 每个字母的高度，我这里每个字母的高度是 40，所以有下图：

算出是第几个字母

记得用 Math.floor向下取个整啊，得到字母的下标索引

取这个字母触发change事件给外部

取这个字母向外派发事件

当索引在0 到 字母数组的长度之间时，派发 change事件。
一定要加这个条件！不然 index的值可能会有问题，亲测！因为滑动右侧索引的时候，整个索引是到底部的，但是底部并没有字母了，此时得到的索引值超过了26（26个英文字母）
给父组件派发的 change事件所带的内容是字母A、B、C，
this.letters[index]获取到的是 letters字母数组内下标为 index的内容。

到这里为止！！！列表和索引的监听终于做完啦~~~

放张完成图