需求：滑动右侧字母列表，手指停在哪屏幕就显示哪儿一个字母开头的城市列表

---

思路

第一步

首先，给右侧字母表得先绑定三个事件。分别是touchstart、touchmove、touchend。

第二步

现在得需要知道手指滑倒的地方对对应的字母是什么。这就需要通过一些计算去得出。有一个解决办法是先计算出A与顶部的距离H，然后在算出每一个字母所占的高度h，然后计算手指与顶部的距离X，然后（X-H) / h。 如果计算出1.5，就代表是第二个字母，2.1就是第三个。

当然以上只是一种想法，具体实现看代码

第三步

具体算法有了，那么怎么实现呢？现在有几个问题需要解决。

1 计算出值后，怎么通过这个值去找到对应的字母？类似与数组，求出了下标，怎么得出这个具体的值

在计算属性中通过for in 循环。 同时需要注意，之前在v-for中因为cities是对象，而现在得出了letters，所以可以改变循环的方法

        letters(){
            const letters=[]
            // for...in 语句用于对数组或者对象的属性进行循环操作。
            for(let item in this.cities){
                letters.push(item)
            }
            return letters
            // ["A","B",.......]
        }

2 现在就可以开始写计算位置的代码了

            //计算A与顶部的距离
            const startY=this.$refs["A"][0].offsetTop
            //计算当前滑动手指所在的地方与顶部的距离
            //79是header和search的总高度
            //所以touchY就是距离顶部的高度
            //这里的e是touchmove被触发时传递的参数
            //e.touches[0].clientX为横坐标
            const touchY=e.touches[0].clientY-79
            // index为字母下标
            //14为每一个字母所占的高度
            //Math.floor为取整
            //这里要格外注意 14为字母高度，但是还得算上margin、padding等  所以修改为19
            const index=Math.floor((touchY-startY)/19)
            //最后触发change事件
            this.$emit("change",this.letters[index])