A字母的offsetTop問題
上篇，在handleTouchMove里做了一些業(yè)務(wù)邏輯操作为严。
當(dāng)我們的手指在字母索引處上下滑動時杯道，這個代碼就會被執(zhí)行列疗。但是這里的性能是比較低的。
首先這個字母A的offsetTop值是固定的俺附，而我們每次執(zhí)行這個方法的時候肥卡，都去運算一次。等于重復(fù)運算了昙读。
有點點不好
怎樣解決呢召调？
先去
data處定義一個startY，它的初始值是0蛮浑，然后再寫一個updated鉤子唠叛，當(dāng)頁面的數(shù)據(jù)被更新，同時頁面完成了自己的渲染之后沮稚，undated鉤子就會被執(zhí)行艺沼，它執(zhí)行的時候做一件事。
updated鉤子里的操作
那么
handleTouchMove里有些操作得修改一下了
修改修改
為啥要updated?
當(dāng)初次渲染字母索引組件時蕴掏，實際上初始cities在City這個父組件內(nèi)可以看到是個空對象障般，也就是頁面剛加載的時候调鲸，字母索引組件的內(nèi)容都不會顯示出來，當(dāng)City父組件獲取ajax數(shù)據(jù)后挽荡，cities的值才發(fā)生變化藐石，字母索引組件才被渲染出來。當(dāng)向字母索引組件傳的值發(fā)生變化時定拟，它就會重新渲染于微，此時它里面的updated鉤子會被執(zhí)行，此時頁面上已經(jīng)展示出了城市列表里的所有內(nèi)容青自。
這個時候獲取A這個字母所在的dom對應(yīng)的offsetTop的值就沒有問題株依。
做個函數(shù)節(jié)流
當(dāng)鼠標(biāo)在字母索引處來回移動的時候，touchMove執(zhí)行的頻率是非常高的延窜，此時我們可以通過節(jié)流來限制一下函數(shù)執(zhí)行的頻率恋腕。
怎么做節(jié)流呢？
去data處定義一個timer逆瑞，默認(rèn)值為null荠藤。
修改成這樣
解析一波：
執(zhí)行
touchMove時，如果已經(jīng)存在了呆万，清除掉this.timer否則創(chuàng)造一個
timer = 一個箭頭函數(shù)商源，延遲16毫秒運行。為啥要這樣做谋减？
如果已經(jīng)正在做這樣的事情牡彻，讓它延遲16毫秒再去執(zhí)行，如果在這16毫秒之間出爹，又做了這個手指的滾動庄吼，那么將上一次要做的操作給清除掉，重新執(zhí)行這次做的事情严就。
這樣減少執(zhí)行頻率总寻，從而提高網(wǎng)頁性能。
更新自2019/03/29
放上地址梢为，項目因為種種原因沒有完成到最后渐行，但是這個城市選擇功能可以供大家參考~(*^▽^*)
戳我
