1、創(chuàng)建熱門(mén)商品圖片展示列表

<!--熱門(mén)商品[ngStyle]="{'width': hotListWidth}":動(dòng)態(tài)綁定樣式，從后臺(tái)ts傳遞；hotListWidth和后臺(tái)變量名稱一致；*ngFor="let item of hotList" ：循環(huán)從后臺(tái)傳遞過(guò)來(lái)的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、數(shù)據(jù)來(lái)源

2.1 熱門(mén)商品圖片放在src/assets下

2.2 熱門(mén)商品ts數(shù)據(jù)代碼

//熱門(mén)商品public hotList:any[]=[];public hotListWidth:any=400;constructor(){//熱門(mén)圖片數(shù)據(jù)來(lái)源for(var i=1;i<=7;i++){this.hotList.push({pic:'assets/0'+i+'.jpg',title:'第'+i+'個(gè)',})}//計(jì)算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;}}//熱門(mén)商品的圖片樣式.hotlist{width: 100%;height: 10rem;overflow-x: auto;overflow-y: hidden;//hostlist外層樣式設(shè)置結(jié)束ul{//hostlist內(nèi)層樣式開(kāi)始// width: 120rem; 動(dòng)態(tài)寬度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標(biāo)簽樣式的css，放在global.css下

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

?

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。