A字母的offsetTop问题
上篇，在handleTouchMove里做了一些业务逻辑操作。
当我们的手指在字母索引处上下滑动时，这个代码就会被执行。但是这里的性能是比较低的。
首先这个字母A的offsetTop值是固定的，而我们每次执行这个方法的时候，都去运算一次。等于重复运算了。
有点点不好
怎样解决呢？
先去
data处定义一个startY，它的初始值是0，然后再写一个updated钩子，当页面的数据被更新，同时页面完成了自己的渲染之后，undated钩子就会被执行，它执行的时候做一件事。
updated钩子里的操作
那么
handleTouchMove里有些操作得修改一下了
修改修改
为啥要updated?
当初次渲染字母索引组件时，实际上初始cities在City这个父组件内可以看到是个空对象，也就是页面刚加载的时候，字母索引组件的内容都不会显示出来，当City父组件获取ajax数据后，cities的值才发生变化，字母索引组件才被渲染出来。当向字母索引组件传的值发生变化时，它就会重新渲染，此时它里面的updated钩子会被执行，此时页面上已经展示出了城市列表里的所有内容。
这个时候获取A这个字母所在的dom对应的offsetTop的值就没有问题。
做个函数节流
当鼠标在字母索引处来回移动的时候，touchMove执行的频率是非常高的，此时我们可以通过节流来限制一下函数执行的频率。
怎么做节流呢？
去data处定义一个timer，默认值为null。
修改成这样
解析一波：
执行
touchMove时，如果已经存在了，清除掉this.timer否则创造一个
timer = 一个箭头函数，延迟16毫秒运行。为啥要这样做？
如果已经正在做这样的事情，让它延迟16毫秒再去执行，如果在这16毫秒之间，又做了这个手指的滚动，那么将上一次要做的操作给清除掉，重新执行这次做的事情。
这样减少执行频率，从而提高网页性能。
更新自2019/03/29
放上地址，项目因为种种原因没有完成到最后，但是这个城市选择功能可以供大家参考~(*^▽^*)
戳我
网友评论