1、header组件的开发
1）样式
2）先引用组件m-header组件
2）除了css样式以外
2、路由及导航栏（css忽略）
1）配置路由，在index.js里，一共有4个路由组件，引用及挂载。
2）导航栏的制作以及引用
3、封装jsonp
1）先添加依赖以及安装
2）建立一个jsonp.js然后完场url的拼接和jsonp的封装
4、recommend组件的制作(slider组件的自作)
1）样式
yan
2）获取轮播图数据
3）建立slider组件
实现途径：使用better-scroll插件来实现滚动原理
实现原理：1、先计算整个slider-group的总宽度，以及给每一个子元素遍历样式，addClass是自己封装的基本js函数。用于class的添加
2、应用better-scroll插件
3、添加按钮和按钮的active样式（定义一个currentPageIndex数据，用于判断是否添加active样式）
4、利用索引关联页面与按钮，关联的时机实在滚动结束后
5、增加定时器，使其自动进行页面跳转，在滑动结束后，继续自动播放，在滑动开始前清除一遍计时器。
6、当视口发生改变时，重新计算图片宽度及slider-group宽度
7、在组件激活，组件停用，实例销毁之前停用定时器
5、获取歌单数据（axios应用）
6、歌单制作（css不展示）
7、scroll组件的制作
1、template模块，用了slot插槽，可以忘里面添加内容
2、先定义几个可能要传入的数据
8、loading组件的制作
1、template模板
2、定义一个可能传入的props
9、歌手页面的数据获取
因为歌手页面数据为jsonp的格式，所以用jsonp来获取
10、拆分和合并所需的数据
1）定义一个_normalList方法，把数据整理成每个具有title数据格式的列表，然后再将数据做排序得到便于遍历的数据列表
2）歌手页面数据的获取
11、listView组件的页面部分编辑
1）页面样子
2）template部分，在最外围引用了scroll组件
3）引用歌手的数据
12、listview的shortcut侧栏的编辑
1）template部分
2）引用数据的计算
13、左右联动的实现
实现这部分的主要逻辑分两块
1）视口栏改变，影响shortcut的样式
⑴先在滚动事件中监听滚动事件，实时输出scrollY
⑵在将列表的高度计算出来，每一块的上下限，以便与计算scrollY落在哪个区域
⑶判断scrollY落在哪个区域，并对其做边界处理，在设置一个：class来判断是否高亮
2）shortcut上面移动，视口相应发生变化
⑴给shortcut部分加上touchstart事件和touchmove事件
⑵给两个事件添加计算方法，第一个是touchstart的方法，利用根据索引值的变化来控制页面的跳转，利用scroll中的scrollToElement方法
⑶第二个是touchmove的方法，第一个的方法。计算出shortcut的移动变化的索引值对应到视口上的宽度，来计算move所需滚动的距离
⑷滚动边界条件的控制
14、fixtitle的实现
1）fixtitle的样子
2）数据的选取，利用计算属性计算获得
3）边界条件的控制以及偏移动画
偏移动画的样子
15、获取歌手详情页的数据及处理
1）采用二级路由的方式形成跳转
⑴创建组件singer-datail
⑵在router的index.js文件下
⑶在singer组件中应用router
⑷抓取listview中的数据，派发点击事件
⑸在singer中接受点击事件并产生跳转
2）用vuex进行数据的管理
⑴安装vuex
⑵store的文件布局
⑶配置各个文件，此例子为配置singer的数据
index.js
mutations-type.js
mutation.js
getter.js
state.js
⑷在main.js中引用
3）song数据的整理
⑴先获取singer的数据，因为song的数据是根据跳转的singerID来的
vuex的语法糖
获取歌手数据
在singer-details组件中获取数据
⑵整理想要的数据格式
定义一个song的类
⑶获取数据
获得song数据
16、组件muisc-list开发
1）页面样式
2)路由回退功能
template
methods
3）背景的制作
⑴背景图片的获取
⑵playBtn的制作
⑶还有覆盖层的制作
4）滚动块的制作形成主体内容块
⑴引用scroll组件
⑵获取滚动的距离
定义数据scrollY
定义探针和滚动监听事件
获取滚动的纵坐标
⑶当滚动发生时，layer背景层跟随滚动
效果图
边界条件的处理
17、song-list组件的开发
1）遍历数据
18、内置播放器组件
⑴播放器的样式
展开状态
缩小状态
⑵给vuex添加要管理的数据
getter
mutation-types
actions
mutations
⑶歌单数据的获取
⑷歌单数据的应用（略）
⑸缩放按钮的设置
⑹缩放动画
⑺播放暂停按钮
根据playing来判断audio的播放和暂停
绑定一个点击事件
⑻前进后退功能
19、进度条组件
⑴传入rate计算播放进度
⑵绑定3个事件
⑶进度条点击事件以及其他封装的方法
网友评论