菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 前端-陈旭辉-20230704 [打印本页]

作者: 陌殇 时间: 2023-7-10 18:53
标题: 前端-陈旭辉-20230704
一、学习内容

增加点击事件
在推荐歌单==Personalized.vue==中，一个item就是一个专辑。
1 元素加入点击事件： @click="selectItem(item.id)
2 定义点击事件方法：methods: {selectItem (id) {}}
3 查看接口：需要传入该歌曲id
4 父元素中加事件

二级路由实现界面切换
1 修改路由规则：加入二级路由规则
2 修改路由懒加载规则
3 创建新组件views/Detail.vue
4 加入出口router-view：
5 通过js设置路由地址

完成详情页
1 拆分组件：
---头部：DetailHeader.vue（改造原有MyHeader.vue）
---中部：DetailMiddle.vue（展示图片）
---底部：DetailBottom.vue（展示列表）
在Detail.vue中导入，注册，使用组件。
2 封装接口：api/index.js
3 Detail.vue的生命周期函数created中拉取数据
4 给子组件传入数据
name：专辑名称
coverImgUrl：封面地址
tracks：歌曲列表
5 定义子组件

src/components/Detail/DetailHeader.vue
详情页底部isroll效果

在Detail.vue中讲底部加入到ScrollView组件中
offsetHeight：元素的像素高度包含元素的垂直内边距和边框，水平滚动条的高度，且是一个整数
专辑详情页

同上在Recommend.vue中

1 加入点击事件，加入type属性（区分点击事件是从歌单还是专辑页面进入的，调用最新专辑还是推荐歌单接口）
2 动态修改路由（url中加入type）
加参数，增加路由占位符
3 修改子组件中Personalized.vue
4 修改获得数据接口：Detail.vue的create方法中根据路由中type来区分调用接口不同
5 新增axios接口,拉取数据

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)