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>