通过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就可以实现滑动快速入口，组件也会跟着动的效果
欢迎交流，小白一枚！