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;
  }