在移动端的项目里面,比如商城项目,大都有可以横向滑动的产品卡片,在Ionic里面,我们可以使用纯html加css来实现这样的功能。
操作步骤
我就直接上代码吧,代码拿过去一看就懂了,相比之前老师教我的用ul,li的方式还要去计算列表的宽度,简单多了。
html代码:
<ion-header>
<ion-toolbar>
<ion-title>product-list</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<h5>产品列表</h5>
<div class="product_list">
<div class="content" *ngFor="let item of productList">
<img src={{item.picUrl}}>
</div>
</div>
</ion-content>
css代码:
h5{
margin-left: 2%;
}
.product_list{
width: 96%;
margin: 0 auto;
margin-top: 10px;
white-space: nowrap;
overflow-x: scroll;
.content{
display: inline-block;
width: 30%;
margin-right: 3%;
}
}
ts代码:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-product-list',
templateUrl: './product-list.page.html',
styleUrls: ['./product-list.page.scss'],
})
export class ProductListPage implements OnInit {
productList = [{id: 0, name: '茶杯0', picUrl: '../../assets/pic1.png'},
{id: 1, name: '茶杯1', picUrl: '../../assets/pic2.png'},
{id: 2, name: '茶杯2', picUrl: '../../assets/pic3.png'},
{id: 3, name: '茶杯3', picUrl: '../../assets/pic4.png'}];
constructor() { }
ngOnInit() {
}
}
图片自己随便找几张就可以了,这里就不放资源了。很简单的用css就能实现的,没必要搞得太复杂。
效果展示:
文章评论