通過better-scroll這個插件實現微信好友滾動列表
安裝better-scroll
npm i better-scroll
初始化better-scroll
//better-scroll需要一個div，類名wrapper
//wrapper下放滾動元素，content，只有wrapper下的第一個元素能夠滾動，其他無效，所以其他元素內容都放在content中
使用前先引入better-scroll
let wrapper = document.querySelector(".wrapper");
//初始化better-scroll，掛載到組件實例里，方便使用
//注意:初始化better-scroll時最好在獲取數據之后,this.$nextTick(() => {})中執行，否則可能出現無法滾動。
this.$scroll = new BScroll(".wrapper");
滾動與快速入口
實現一：點擊快速入口，組件滾動到指定位置，如點擊A，跳轉到A的歌手中
首先，需要獲取到一個數組 AZList = ["熱門","A","B"......"Z"]，可通過數據生成也可以寫假數據
再獲取每一個tab欄，例如 熱門這一欄，距離窗口頂部的距離
獲取方法：通過ref給每一個tab欄綁定，遍歷this.$refs,創建一個數組存放數據,如clientData.push( this.$refs.offsetTop ) (這個用法不標准，自行查看如何再refs上獲取offsetTop)
先根據數組生成快速入口。
點擊快速入口時，獲取該快速入口在數組中為索引值，如A，索引值為1
此時添加一個方法
scroll(index){ //接收一個index ， 為 點擊快速入口時 獲取到的索引值
//clientData存放的是每一個tab欄距離窗口的距離，比如說是熱門距離窗口的距離
this.$scroll是掛載到組件實例的對象，上面有提到，scrollTo是better-scroll提供的方法，可自行查閱，400是動畫時間
this.$scroll.scrollTo(0,-clientData[index],400)
}
到這就可以實現點擊快速入口滾動
實現二：滑動快速入口與組件聯動
@touchstart="touchStart" //手指按下
@touchmove="touchMove"//手指滑動
@touchend = "touchEnd" //手指抬起
1、手指點擊touchstart時，通過事件對象e獲取到點擊的元素
2、事件對象e中有一個屬性為touches，touches里面有一個clientY，距離窗口頂部的距離
實現思路：
1、假設
熱門 距離窗口頂部的距離為180
2、我們現在點擊了快速入口的A，通過事件對象獲取到了 A 距離窗口 頂部 的距離 x，那么 A 到 熱門 的距離 就等於 length = x - 180
3、每一個快速入口之間的距離 為 20px
4、通過 length / 20 就可以獲取到 我們滑動到了哪個位置
5、根據clientData 和 第四步獲取到的索引值， 可以獲取到滾動距離
5、通過scrollTo就可以實現滑動快速入口，組件也會跟着動的效果
歡迎交流，小白一枚！