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

?

總結

以上是生活随笔為你收集整理的ionic4学习笔记11-某东项目热门商品展示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。