字母索引滾動監聽

修改字母索引組件，綁定三個touch事件，分別是touchStart、touchMove、touchEnd。

定義三個touch事件

只有當touchstart之后，才執行touchmove里的內容，所以在data里定義一個標識位touchStatus，默認值為false，

當手指觸摸的時候，標識位的值為true，結束滑動的時候，標識位的值為false。只有當標識位的值為true的時候，才去執行move事件的處理。

然后要做的一件事就是，當我們在字母索引處上下滑動的時候，現在所在的位置是第幾個字母。

主要是思路是：

1.獲得A字母距離頂部的高度

2.滑動的時候看下當前手指位置距離頂部的高度

3.前兩個做一個差值，算出當前手指位置和A字母頂部的差值，

然后除以每個字母的高度，就能算出當前是第幾個字母了

4.然后取這個字母觸發change事件給外部

如果想根據下標，找到下標對應的字母的話，首先得有個數組存儲字母的列表。但是現在cities是個對象，并不是個數組，所以我們需要一個數組。

在computed計算屬性中定義一個letters

構建letters

這樣就構建出了一個名字叫做letters的計算屬性，它的內容大概是這樣的['A', 'B', 'C', 'D',...]，返回的結果就是這樣的數組。

有了這個數組，之前字母索引處的循環也可以相應的改一下，之前是做cities對象的循環。現在可以直接根據這個數組循環。

修改了一下下

獲取A字母距離頂部的高度

首先綁定一下dom元素：

獲取dom元素

然后在move的時候，如果此時touchStatus為·true·,開始執行以下代碼，定義一個startY，A字母的頂部高度是它的offsetTop，那么就這樣寫this.$refs['A'][0].offsetTop(this.$refs['A']是個數組，必須取下標0才能拿到它的dom元素，)

獲取A字母距離紅色區域下沿的高度

我是瀏覽器測試圖：

我是瀏覽器測試圖

此時在索引處拖動的時候，控制臺不停的打印一個值，這個值就是A字母頂部距離紅色區域最下沿的高度(紅色區域是指的搜索框)。

我是示意圖

獲取當前手指距離頂部的高度并做差值

計算手指的位置

touch事件有個參數e，事件對象里 它會有一個touches的數組，第0項表示的是手指的信息，這里獲取到手指的clientY的值。

為啥這里是clientY?為啥不和上面的一樣是offsetTop？

讓我們走進e.touches

image.png

這里可以看到e.touches里這么一些屬性。

####這里是百度的touch事件的科普

在移動端頁面開發時，常常會用到touch事件，

比如左滑右滑的輪播等。常用的觸摸事件有touchstart,touchmove,touchend。

每個事件包含下面三個用于跟蹤虎摸的屬性：

touches：表示當前跟蹤的觸摸操作的touch對象的數組。

targetTouches：特定于事件目標的Touch對象的數組。

changeTouches：表示自上次觸摸以來發生了什么改變的Touch對象的數組。

每個touch事件包含下面的屬性：

clientX：觸摸目標在視口中的x坐標。

clientY：觸摸目標在視口中的y坐標。

identifier：標識觸摸的唯一ID。

pageX：觸摸目標在頁面中的x坐標。

pageY：觸摸目標在頁面中的y坐標。

screenX：觸摸目標在屏幕中的x坐標。

screenY：觸摸目標在屏幕中的y坐標。

target：觸摸的DOM節點目標。

打印一波

打印一下這3個Y的值，clientY和pageY在這里是相等的，但是screenY與它們不同，保險起見，這里最好用的是clientY。

clientY被分割了

clientY的距離是這樣的，所以如果想算出手指距離紅色區域最下沿的高度，得用這個clientY - 紅色區域的高度(一個搜索框+標題欄部分)，這部分的高度在我這里是160。

所以才有const touchY = e.touches[0].clientY - 160

算出是第幾個字母

得到這部分高度之后，用這部分高度 - 第一步得到的 高度，算差值。這個差值是當前手指的高度 到 A字母的高度，然后用這個差值 除以 每個字母的高度，我這里每個字母的高度是 40，所以有下圖：

算出是第幾個字母

記得用Math.floor向下取個整啊，得到字母的下標索引

取這個字母觸發change事件給外部

取這個字母向外派發事件

當索引在0 到 字母數組的長度之間時，派發change事件。

一定要加這個條件！不然index的值可能會有問題，親測！因為滑動右側索引的時候，整個索引是到底部的，但是底部并沒有字母了，此時得到的索引值超過了26(26個英文字母)

給父組件派發的change事件所帶的內容是字母A、B、C，

this.letters[index]獲取到的是letters字母數組內下標為index的內容。

到這里為止！！！列表和索引的監聽終于做完啦~~~

放張完成圖

總結

以上是生活随笔為你收集整理的vue项目通讯录_Vue实现类似通讯录功能（下）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。