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

港控/mmm° 2023-02-20 10:41 131阅读 0赞

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+'个',
          })
        }
    
      }