华为鸿蒙北向应用开发DAY11
今日任务是完成课程详情和课程视频播放
其中，简介一栏在未点击时只能显示一部分内容，当点击图标后会调用showPanel方法，之后会弹出一个panel显示完整的简介
课程目录的设置中还应该判断该目录是否有子目录，如果有也要逐一显示
此处出现问题，如果先打开第二章的子目录，则第一章的子目录无法打开，先打开第一章再打开第二章则可以，关闭同样需要先关闭第一章再关闭第二章，询问老师后知道是高度不足导致的，在目录部分的div中加上 height=100%，就可以解决了。
课程详情 {{course.name}} {{course.teacher}} | {{course.classHour}}课时 {{course.studyNum}}人在学 Spring Spring Spring 30.00% {{course.introduction}} 课程介绍 {{course.introduction}} 课程目录 课程评价 课程笔记 {{$item.name}} {{$item.name}} 已完成(￣∀￣) 暂无评论 Σ(° △ °|||) 暂无笔记，爬去学习 (￣ε(#￣) js:
import router from '@system.router';import getData from '../utils/getData.js'export default { data: { course:{}, showPanelImage:0, tab:0, catalogues:[], id:0 }, goBack(){ router.back(); }, onShow(){// this.id=router.getParams().id; this.course=getData.getCourseById(this.id); this.catalogues=getData.getCatalogues(this.id) }, showPanel(){ if(this.showPanelImage==0) { this.$element("course_introduction").show(); this.showPanelImage=1; } else { this.$element("course_introduction").close(); this.showPanelImage=0; } }, changeMode(params){ if(params.mode=='mini') { this.$element("course_introduction").close(); this.showPanelImage=0; } }, changeTab(index){ this.tab=index }, studyCourse(id,path){ router.push({ uri:"pages/studyCourse/studyCourse", params:{ id:id, courseName:this.course.name, materialPath:path } }) }}css:
.container { flex-direction: column; align-items: center; width: 100%; height: 100%;}.title-spring{ width: 30px; height: 16px; border-radius: 2px; background-color: #FFF0F5; justify-content: center; align-items: center; margin-right: 5px;}.title-spring { font-size: 8px; color: red;}.tabBarItem{ width: 80px; height: 100%; justify-content: center; align-items: center;}.tabBarTile{ font-size: 16px; width: 80px; height: 45px; text-align: center; border-bottom-width: 3px; border-bottom-style: solid;}.introduction{ width: 100%; height: 30px; align-items: center; justify-content: space-between; margin: 0 10px 0 5px;}.introduction>text{ width: 85%; height: 100%; font-size: 12px; color: silver; overflow: hidden ; text-overflow: ellipsis; white-space: nowrap;}.complete{ width: 36px; height: 18px; color: #40E0D0; background-color: #F5FFFA; font-size: 10px; align-items: center; justify-content: center; margin-right: 10px; border-radius: 2px;}视频播放：
样式仿照课程详情就可以，有关播放的设置又有定义好的方法，比较简单。要注意的是需要在模拟器上运行播放功能:
播放黑屏的原因据老师说是因为内存不够
hml:
{{courseName}} 我的笔记 他人笔记 暂无笔记，爬去学习 (￣ε(#￣) js:
import router from '@system.router';export default { data: { tab:0, courseName:'', courseId:0, materialPath:'', event:'', seekingtime:'', timeupdatetime:'', seekedtime:'', isStart: true, isfullscreenchange: false, duration: '', }, goBack(){ router.back(); }, onInit(){ this.courseId=router.getParams().id; this.courseName=router.getParams().courseName; this.materialPath=router.getParams().materialPath; }, preparedCallback:function(e){ this.event = '视频连接成功'; this.duration = e.duration;}, startCallback:function(){ this.event = '视频开始播放';}, pauseCallback:function(){ this.event = '视频暂停播放'; }, finishCallback:function(){ this.event = '视频播放结束';}, errorCallback:function(){ this.event = '视频播放错误';}, seekingCallback:function(e){ this.seekingtime = e.currenttime; }, timeupdateCallback:function(e){ this.timeupdatetime = e.currenttime;}, change_start_pause: function() { if(this.isStart) { this.$element('videoId').pause(); this.isStart = false; } else { this.$element('videoId').start(); this.isStart = true; } }, change_fullscreenchange: function() {//全屏 if(!this.isfullscreenchange) { this.$element('videoId').requestFullscreen({ screenOrientation : 'default' }); this.isfullscreenchange = true; } else { this.$element('videoId').exitFullscreen(); this.isfullscreenchange = false; } }, changeTab(index){ this.tab=index; }}css:
.container { flex-direction: column; align-items: center; width: 100%; height: 100%;}.tabBarItem{ width: 80px; height: 100%; justify-content: center; align-items: center;}.tabBarTile{ font-size: 16px; width: 80px; height: 45px; text-align: center; border-bottom-width: 3px; border-bottom-style: solid;}