Ionic实现可以横向滑动的产品卡片

在移动端的项目里面，比如商城项目，大都有可以横向滑动的产品卡片，在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就能实现的，没必要搞得太复杂。

效果展示：