城市选择26字母页

去哪网做到根据字母选择城市的页面，记录一下这个的实现
首先在给循环出来的li元素上添加点击事件，通过点击事件获取到所点击的字母，通过$emit向父组件发送事件，并将获取到的元素传到父元素中

handleLetterClick (e) {this.$emit('change', e.target.innerHTML)
},

父元素接收并定义事件，现在data中初始化即将收到的字母，然后将子组件传过来的数据，赋值给data中定义的变量，再将数据通过绑定属性的方式传给另外一个组件

<city-list :letter="letter" :cities="cities" :hotCities="hotCities"></city-list>
<city-alphabet @change="handleLetterChange" :cities="cities"></city-alphabet>

data () {return {letter: ''}
},
methods: {handleLetterChange(letter){this.letter = letter}
}

将点击的字母传给list组件后，在props中接收，在list组件中给每个字母所在的area绑定ref属性

<div class="area" v-for="(item, key) of cities" :key="key" :ref="key">

props: {hotCities: Array,cities: Object,letter: String
},

接着通过watch监听letter的变化，一旦letter发生变化，就让页面滚动到该字母所在的位置。这里用到better-scroll的scrollToElement()

watch: {letter() {if(this.letter){const element = this.$refs[this.letter][0]  //获取到的字母所在的DOM元素this.scroll.scrollToElement(element)}}
}

接下来要实现的是滑动右侧的字母，左侧的城市跟着发生变化

(这里用到的计算方法是：获取首字母到顶部的距离，接着获取手指移动的位置到顶部的距离，用手指移动的距离减去首字母到顶部的距离之后除以一个字母的高度，就可以获取到手指具体移动到哪个字母上，然后让左侧滑动相应的字母)

在Alphabet组件中，给循环出来的item绑定三个事件：touchstart、touchmove、touchend

<li class="item" @touchstart="handleTouchStart"@touchend="handleTouchEnd"@touchmove="handleTouchMove"@click="handleLetterClick"v-for="item of letters":ref="item":key="item">{{item}}</li>

在js中获取到从父元素那里传过来的数据，使用计算属性对数据进行处理只要字母，并且在data中初始化touchStatus的状态，如果touchStatus的状态为true，才能触发移动事件，接着实现三个touch事件：

props: {cities: Object
},
data () {return {touchStatus: true}
},
computed: {letters () {const letters = []for(let i in this.cities) {letters.push(i)}return letters}
},
methods: {handleTouchStart() {this.touchStatus = true},handleTouchMove(e) {if (this.touchStatus) {const startY = this.$refs['A'][0].offsetTopconst touchY = e.touches[0].clientY - 79const index = Math.floor((touchY - startY) / 20)if (index >= 0 && index < this.letters.length) {this.$emit('change', this.letters[index])}}},handleTouchEnd(){this.touchStatus = false}
}

性能优化

上面的代码在每次触发touchmove事件的时候，都会计算startY = this.$refs[‘A’][0].offsettop，这就造成页面性能不好，此时可以在data中定义一个startY，然后在updata钩子函数中计算startY的值

函数截流：
使用函数截流限制一个touchmove执行的频率

首先在data中定义一个timer: null，接着在handleTouchMove函数中判断this.timer是否是空的，如果是就清除this.timer，将this.timer赋值为定时器setTimeout16秒执行一次