实现两个联动
一是点击右侧字母的时候，城市列表出现相应首字母下的城市
二是鼠标在字母表上滑动的时候，城市列表实时跟着变化
一．点击字母出现相应的列表，给每个字母设置handleLetterClick事件
-
<template>
-
<div>
-
<ul class="list">
-
<li class="item"
-
v-for="item of letters"
-
:key="item"
-
@click="handleLetterClick"
-
@touchstart="handleTouchStart"
-
@touchmove="handleTouchMove"
-
@touchend="handleTouchEnd"
-
:ref="item"
-
>
-
{{item}}
-
</li>
-
</ul>
-
</div>
-
</template>
获取当前点击的字母，传给父组件city,再由city组件传给城市列表list组件，再根据字母滚动到相应的内容
-
<city-alphabet :cities="cities" @change="handleLetterChange"></city-alphabet>
-
handleLetterChange(letter){
-
this.letter=letter
-
}
城市列表list组件获取到父组件传过来的letter,并监听letter的变化
-
props:{
-
hot:Array,
-
cities:Object,
-
letter:String
-
},
-
watch:{
-
//监听letter，当letter发生变化时触发
-
letter(){
-
if(this.letter){
-
const element=this.$refs[this.letter][0]
-
this.scroll.scrollToElement(element)
-
}
-
}
-
}
二．当鼠标滑动的时候，城市列表实时地发生变化
实现原理:其实和点击的时候一样，当鼠标滑动时，实时地获取滑动的时候所经过的字母，再把字母传给城市列表list组件，再跳转到相应的元素
（（鼠标距顶部的距离一79）一A字母距父元素的距离）/每个字母的高度20 计算此时鼠标所在的第几个字母
-
<template>
-
<div>
-
<ul class="list">
-
<li class="item"
-
v-for="item of letters"
-
:key="item"
-
@click="handleLetterClick"
-
@touchstart="handleTouchStart"
-
@touchmove="handleTouchMove"
-
@touchend="handleTouchEnd"
-
:ref="item"
-
>
-
{{item}}
-
</li>
-
</ul>
-
</div>
-
</template>
-
-
<script>
-
export default {
-
name:"CityAlphabet",
-
data (){
-
return{
-
touchStatus:false,
-
startY:0,
-
//函数截流，提高性能
-
timer:null
-
}
-
},
-
updated(){
-
//A字母元素到父元素顶部的距离
-
this.startY=this.$refs["A"][0].offsetTop
-
-
},
-
props:{
-
cities:Object
-
},
-
computed: {
-
letters () {
-
const letters = []
-
for (let i in this.cities) {
-
letters.push(i)
-
}
-
return letters
-
}
-
},
-
methods:{
-
handleLetterClick(e){
-
//把字母传给父亲，父亲再给List
-
//e.target.innerText获取里边的内容
-
this.$emit('change',e.target.innerText)
-
},
-
handleTouchStart(){
-
this.touchStatus=true
-
},
-
handleTouchMove(e){
-
if(this.touchStatus){
-
if(this.timer){
-
clearTimeout(this.timer)
-
}
-
this.timer=setTimeout(() => {
-
//touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
-
//touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
-
//touchend事件：当手指从屏幕上离开的时候触发。
-
//touches：表示当前跟踪的触摸操作的touch对象的数组。
-
//clientY：触摸目标在视口中的y坐标。
-
//79是绿色底部到顶部的距离
-
const touchY=e.touches[0].clientY-79
-
//每个字母的高度是20
-
const index=Math.floor((touchY-this.startY) / 20)
-
console.log(touchY)
-
if(index >= 0&&index < this.letters.length){
-
this.$emit('change',this.letters[index])
-
}
-
}, 16);
-
-
}
-
},
-
handleTouchEnd(){
-
this.touchStatus=false
-
}
-
}
-
-
}
-
</script>