vue 城市列表与字母表联动

vue 城市列表与字母表联动

实现两个联动

    一是点击右侧字母的时候，城市列表出现相应首字母下的城市

    二是鼠标在字母表上滑动的时候，城市列表实时跟着变化

一．点击字母出现相应的列表，给每个字母设置handleLetterClick事件

1. <template>
2.     <div>
3.        <ul class="list">
4.            <li class="item"
5.             v-for="item of letters"
6.             :key="item"
7.              @click="handleLetterClick"
8.              @touchstart="handleTouchStart"
9.              @touchmove="handleTouchMove"
10.              @touchend="handleTouchEnd"
11.              :ref="item"
12.              >
13.              {{item}}
14.              </li>
15.        </ul>
16.     </div>
17. </template>

获取当前点击的字母，传给父组件city,再由city组件传给城市列表list组件，再根据字母滚动到相应的内容

1. <city-alphabet :cities="cities" @change="handleLetterChange"></city-alphabet>
2. handleLetterChange(letter){
3.               this.letter=letter
4.           }

城市列表list组件获取到父组件传过来的letter,并监听letter的变化

1. props:{
2.            hot:Array,
3.            cities:Object,
4.            letter:String
5.        },
6.  watch:{
7.          //监听letter，当letter发生变化时触发
8.          letter(){
9.             if(this.letter){
10.                 const element=this.$refs[this.letter][0]
11.                 this.scroll.scrollToElement(element)
12.             }
13.          }
14.        }

 

二．当鼠标滑动的时候，城市列表实时地发生变化

实现原理:其实和点击的时候一样，当鼠标滑动时，实时地获取滑动的时候所经过的字母，再把字母传给城市列表list组件，再跳转到相应的元素

（（鼠标距顶部的距离一79）一A字母距父元素的距离）/每个字母的高度20 计算此时鼠标所在的第几个字母

1. <template>
2.     <div>
3.        <ul class="list">
4.            <li class="item"
5.             v-for="item of letters"
6.             :key="item"
7.              @click="handleLetterClick"
8.              @touchstart="handleTouchStart"
9.              @touchmove="handleTouchMove"
10.              @touchend="handleTouchEnd"
11.              :ref="item"
12.              >
13.              {{item}}
14.              </li>
15.        </ul>
16.     </div>
17. </template>
18.  
19. <script>
20.     export default {
21.         name:"CityAlphabet",
22.         data (){
23.             return{
24.                 touchStatus:false,
25.                 startY:0,
26.                 //函数截流，提高性能
27.                 timer:null
28.             }
29.         },
30.         updated(){
31.             //A字母元素到父元素顶部的距离
32.            this.startY=this.$refs["A"][0].offsetTop
33.  
34.         },
35.         props:{
36.             cities:Object
37.         },
38.          computed: {
39.             letters () {
40.             const letters = []
41.             for (let i in this.cities) {
42.                 letters.push(i)
43.             }
44.             return letters
45.             }
46.         },
47.         methods:{
48.             handleLetterClick(e){
49.                //把字母传给父亲，父亲再给List
50.                //e.target.innerText获取里边的内容
51.                this.$emit('change',e.target.innerText)
52.             },
53.             handleTouchStart(){
54.                 this.touchStatus=true
55.             },
56.             handleTouchMove(e){
57.                 if(this.touchStatus){
58.                    if(this.timer){
59.                        clearTimeout(this.timer)
60.                    }
61.                    this.timer=setTimeout(() => {
62.                        //touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
63. 　　 //touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
64. 　 //touchend事件：当手指从屏幕上离开的时候触发。
65.                        //touches：表示当前跟踪的触摸操作的touch对象的数组。
66.                        //clientY：触摸目标在视口中的y坐标。
67.                        //79是绿色底部到顶部的距离
68.                        const touchY=e.touches[0].clientY-79
69.                        //每个字母的高度是20
70.                        const index=Math.floor((touchY-this.startY) / 20)
71.                        console.log(touchY)
72.                         if(index >= 0&&index < this.letters.length){
73.                             this.$emit('change',this.letters[index])
74.                         }
75.                    }, 16);
76.  
77.                 }
78.             },
79.             handleTouchEnd(){
80.                 this.touchStatus=false
81.             }
82.         }
83.  
84.     }
85. </script>

posted on 2018-06-27 04:25 gisery 阅读( ...) 评论( ...) 编辑 收藏