华为鸿蒙北向应用开发DAY12

今日任务，完成班级列表和班级详情

班级列表：氛围两部分，全部班级和我的班级

具体实现与课程列表类似

新加了一个刷新功能：

使用prompt组件判断是否还有新数据未加载，如果有就将页面增加并且提示更新成功，如果没有就提示已经是最新数据了

hml:

    
 
      
 
     班级列表 
 
      
    
 
     
  
      全部班级  
  
      我的班级  
     
     
        共      {{tab==0?total:myTotal}}      个课程          人数      时间     
    
    
           
  
        
  
      {{$item.className}}      
   人数: {{$item.studentNum}}   班主任: {{$item.teachers[0]}}      
      简介:{{$item.signature}}  
     
          
    
        
      
         
      
   {{$item.className}}   
人数: {{$item.studentNum}}班主任: {{$item.teachers[0]}}   
   简介:{{$item.signature}}      
  
          

js:

import getData from "../utils/getClassData.js"import router from '@system.router';import prompt from '@system.prompt';export default {    data: { classes:[], myClasses:[], total:0, myTotal:0, isOver:false, tab:0, pageNum:1, studentId:'', fresh:false    },    changeTab(index){      this.tab=index;    },    onInit(){ this.getClasses(); this.getClassesByStudentId();    },    getClasses(){ let pageSize=6; let params={pageNum:this.pageNum,pageSize:pageSize}; let data=getData.getClasses(params); this.classes= data.rows.concat(this.classes); this.total=data.total; let pageTotal=Math.ceil(data.total/pageSize); this.isOver=this.pageNum==pageTotal    },    getClassesByStudentId(){ this.myClasses=getData.getClassesByStudentId(this.studentId); this.myTotal=this.myClasses.length;    },    goBack(){ router.back();    },    refresh:function(e){ prompt.showToast({     message:'刷新中...',     duration:2000,     bottom:500 }); var that=this; that.fresh=this.refreshing; if(this.isOver) {     that.fresh=false;     prompt.showToast({  message:'已经是最新数据了 （＊￣（エ）￣）',  duration:2000,  bottom:500     }); } else {     message:'更新成功 ヾ(≧▽≦*)o'     this.pageNum++;     this.getClasses(); }    },    showDetail(id){ router.push({     uri:"pages/classDetail/classDetail",     params:{  id:id,     } })    }}

css:

.container {    flex-direction: column;    align-items: center;    width: 100%;    height: 100%;}.tabBarItem{    width: 30%;    height: 100%;    justify-content: center;    align-items: center;}.tabBarTile{    font-size: 15px;    width: 80px;    height: 45px;    text-align: center;    border-bottom-width: 3px;    border-bottom-style: solid;}

班级详情：

与课程详情类似：

hml:

      
      
 
     {{myClass.signature}} 
 
     {{myClass.className}}     
  班主任: {{myClass.classMaster}}        {{myClass.studentNum}}      个在学       
 
        
 申请加入    

js:

import getData from '../utils/getClassData.js'import router from '@system.router';export default {    data: { id:0, myClass:{}    },    onInit(){ this.id=router.getParams().id; this.myClass=getData.getClassById(this.id);    },    goBack(){ router.back();    }}

css:

.container {   flex-direction: column;    align-items: center;    justify-content: center;    width: 100%;}.titleDiv{    top:150px;    height: 80px;    width: 96%;    align-items: center;    justify-content: center;    flex-direction: column;    box-shadow: 0 5px 10px 1px #E0E0E0;    border-bottom-left-radius: 5px;    border-bottom-right-radius: 5px;    background-color: white;}

更新：我的班级部分图片无显示并非老师所说没有设置图片，怀疑仍是样式问题：

这是原来的“全部班级”和“我的班级”：

上面三个图片无显示，刷新也不管用。

但是可以看到在全部班级中同样的班级就是有图片显示的，那么检查是哪里出问题。 

可以看到，tab为0时是全部班级页面，为1是我的班级页面，调换一下，让全部班级和我的班级患页面，同时为tab为1的页面也设置一个刷新功能，在看一下：

同样是tab为1的页面前三个图片不显示，刷新一下：

刷新后显示正常，且不影响另一个页面：

所以将全部班级和我的班级两个页面互换一下就可以解决图片不显示的问题了。