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