ionic4学习笔记13-某东项目分类列表

1、Tab2页面代码

<ion-content>
  <div class="cate_content">
    <div class="cate_left">
      <ion-list lines="full">
        <ion-item *ngFor="let item of lCateList">
          <ion-label>{{item}}</ion-label>
        </ion-item>
      </ion-list>
    </div>

    <div class="cate_right">

      <ion-grid fixed>
        <ion-row>
          <ion-col size="4" *ngFor="let item of rCateList">
            <img [src]="item.pic" />
            <p>{{item.title}}</p>
          </ion-col>

        </ion-row>

        <ion-row>
          <ion-col size="4" *ngFor="let item of rCateList">
            <img [src]="item.pic" />
            <p>{{item.title}}</p>
          </ion-col>

        </ion-row>
        <ion-row>
          <ion-col size="4" *ngFor="let item of rCateList">
            <img [src]="item.pic" />
            <p>{{item.title}}</p>
          </ion-col>

        </ion-row>
        <ion-row>
          <ion-col size="4" *ngFor="let item of rCateList">
            <img [src]="item.pic" />
            <p>{{item.title}}</p>
          </ion-col>

        </ion-row>
      </ion-grid>

    </div>
  </div>

</ion-content>

2、css代码（重要）

.cate_content{
    width: 100%;

    height: 100%;

    display: flex;

    .cate_left{
        width: 9rem;
        height: 100%;
        overflow-y: auto;
       
    }

    .cate_right{

        flex:1;
        height: 100%;
        overflow-y: auto;
       
    }
}

3、数据来源

 public lCateList:any[]=[];


  public rCateList:any[]=[];

  constructor(){

    //左侧模拟数据
    for(let i=0;i<16;i++){
      
      this.lCateList.push(`分类${i}`);
    }

    //右侧数据
    for(var i=1;i<=12;i++){
      this.rCateList.push({
        pic:'assets/list'+i+'.jpg',
        title:'第'+i+'个',
      })
    }

  }