需求:滑动右侧字母列表,手指停在哪屏幕就显示哪儿一个字母开头的城市列表
![5489379-9617c26fb9442200.png](https://i-blog.csdnimg.cn/blog_migrate/5f4e81504c7558e635f656a7f2b86e5a.png)
思路
第一步
首先,给右侧字母表得先绑定三个事件。分别是touchstart、touchmove、touchend。
第二步
现在得需要知道手指滑倒的地方对对应的字母是什么。这就需要通过一些计算去得出。有一个解决办法是先计算出A与顶部的距离H,然后在算出每一个字母所占的高度h,然后计算手指与顶部的距离X,然后(X-H) / h。 如果计算出1.5,就代表是第二个字母,2.1就是第三个。
当然以上只是一种想法,具体实现看代码
第三步
具体算法有了,那么怎么实现呢?现在有几个问题需要解决。
1 计算出值后,怎么通过这个值去找到对应的字母?类似与数组,求出了下标,怎么得出这个具体的值
在计算属性中通过for in 循环。 同时需要注意,之前在v-for中因为cities是对象,而现在得出了letters,所