vue 城市列表与字母表联动
vue 城市列表与字母表联动
实现两个联动
一是点击右侧字母的时候，城市列表出现相应首字母下的城市
二是鼠标在字母表上滑动的时候，城市列表实时跟着变化
一．点击字母出现相应的列表，给每个字母设置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>
posted on 2018-06-27 04:25 gisery 阅读(...) 评论(...) 编辑 收藏
以上是 vue 城市列表与字母表联动 的全部内容， 来源链接： utcz.com/z/376993.html
