字母索引滚动监听
修改字母索引组件，绑定三个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的内容。
到这里为止！！！列表和索引的监听终于做完啦~~~
放张完成图
网友评论