【Web】vue2.0音乐APP实战中的知识点总结（二）

一.界面展示

二.难点回顾

这一个界面难度明显大于上一个，做起来有些吃力，主要分成以下几个模块制作。

1.数据爬取，以及重新组织。

难点：数组操作

2.listView基础模块编写

难点：列表与右侧的字母列表联动

思路整理：
A.点击右侧字母，跳转到对应的列表

通过绑定点击的监听事件，通过$refs获取DOM节点对应的index，利用better-scroll自带的方法，滚动到对应的列表。

B.滚动右侧字母列表，对应到列表中

通过绑定Move事件，计算滚动的距离，除以列的宽度后，得到对应的index，利用better-scroll自带的方法，滚动到对应的列表。

C.滑动列表，字母跟着高亮（HARD）

在scroll中，设置listenScroll,绑定$emit方法，来监听scroll事件，并获取pos（位置）。

在listview中，将scroll事件绑定scroll方法，然后在该方法中，获取到Pos.y(y方向上的滑动距离)

在watch中，监