ionic4学习笔记12-某东项目栅格完成商品列表

1、页面代码

<div class="h_title">
    商品列表
  </div>
  <!--

    栅格系统12列
    size="6":表示每行有2列；
    
  -->
  <div class="plist">
    <ion-grid>
      <ion-row>
        <ion-col size="6" *ngFor="let item of pList">
          <img [src]="item.pic" />
          <p>{{item.title}}</p>
        </ion-col>      
      </ion-row>
    </ion-grid>
  </div>

2、数据来源

     2.1 图片已放在了assets/文件夹下

     2.2 ts数据

//商品列表
  public pList:any[]=[];
 //商品列表
    for(var i=1;i<=12;i++){
      this.pList.push({
        pic:'assets/list'+i+'.jpg',
        title:'第'+i+'个',
      })
    }