ionic4學習筆記11-某東項目熱門商品展示

1、創建熱門商品圖片展示列表

 <!--熱門商品
      [ngStyle]="{'width': hotListWidth}":動態綁定樣式，從後臺ts傳遞；hotListWidth和後臺變量名稱一致；
      *ngFor="let item of hotList" ：循環從後臺傳遞過來的hotList
  -->
  <div class="h_title">
    猜你喜歡
  </div>
  <div class="hotlist">
    <ul class="clearfix" [ngStyle]="{'width': hotListWidth}">
      <li *ngFor="let item of hotList">

        <img [src]="item.pic" />
        <p>{{item.title}}</p>
      </li>
    </ul>
  </div>

2、數據來源

2.1 熱門商品圖片放在src/assets下

2.2 熱門商品ts數據代碼

  //熱門商品
  public hotList:any[]=[];

  public hotListWidth:any=400;


  constructor(){
  

    //熱門圖片數據來源
    for(var i=1;i<=7;i++){
      this.hotList.push({
        pic:'assets/0'+i+'.jpg',
        title:'第'+i+'個',
      })
    }

    //計算hotListWidth的寬度
    this.hotListWidth=this.hotList.length*9+'rem';


  }

3. CSS樣式：

//猜你喜歡文字的樣式
  .h_title{
    padding: 1rem .5rem;
    font-size: 1.4rem;

    &::before{
      display: inline-block;
      border-left: 3px solid #f53d3d;
      height: 14px;
      width: 1px;
      content: "";
      top: 2px;
      position: relative;
    }
  
  }
  
  //熱門商品的圖片樣式
  .hotlist{
    width: 100%;
    height: 10rem;
    overflow-x: auto;
    overflow-y: hidden;//hostlist外層樣式設置結束
  
    ul{//hostlist內層樣式開始
      // width: 120rem;  動態寬度
      li{
        width: 8rem; //8rem=80px;
        height:10rem;
        float: left;
        margin-left: 1rem;
  
        img{
          width: 7rem;
          height: 7rem;
        }
  
        p{
          padding: .4rem;
          text-align: center;
        }
      }
    }
  }

4、去掉ul標籤樣式的css，放在global.css下

ul,ol{
    list-style-type: none;
  }