Ionic 3中如何实现页面及含ion-card列表的div左右滑动？

嘿，我来帮你搞定Ionic 3里的左右滑动需求～ 分两种场景给你详细说：页面级的滑动切换，还有你要的卡片列表横向滑动查看。

一、页面级的左右滑动切换 #

如果是想实现整个页面之间的左右滑动切换，Ionic 3自带的ion-slides组件就能完美解决，这是官方专门为移动端滑动场景设计的，上手超级简单：

1. 页面结构示例 #

在你的页面模板（.html）里这么写：

<ion-slides pager loop>
  <!-- 第一个页面内容 -->
  <ion-slide>
    <ion-content padding>
      <h2>首页</h2>
      <p>这里是首页的内容区域</p>
    </ion-content>
  </ion-slide>
  <!-- 第二个页面内容 -->
  <ion-slide>
    <ion-content padding>
      <h2>我的行程</h2>
      <p>这里是行程列表页面</p>
    </ion-content>
  </ion-slide>
</ion-slides>

2. 常用配置说明 #

• pager：显示底部的滑动指示器小点，让用户知道当前在第几个页面
• loop：开启循环滑动，滑到最后一页能无缝切回第一页
• 你还可以自定义更多滑动参数，在页面的.ts文件里配置：

import { Component } from '@angular/core';

@Component({
  selector: 'page-slides',
  templateUrl: 'slides.html'
})
export class SlidesPage {
  // 自定义滑动配置
  slideOptions = {
    initialSlide: 0, // 默认显示第0个页面（从0开始计数）
    speed: 400, // 滑动动画的速度（单位：毫秒）
    spaceBetween: 0 // 页面之间的间距，默认0即可
  };
}

然后在模板里绑定这个配置：

<ion-slides [options]="slideOptions" pager loop>
  <!-- 你的页面slide内容 -->
</ion-slides>

二、卡片列表的左右滑动查看 #

针对你提供的ion-card列表代码，我们可以把它改造成横向滑动的卡片流，同样用ion-slides实现，适配移动端触摸滑动：

1. 修改后的模板代码 #

把你原来的结构调整为ion-slides包裹每个卡片，每个subtrip对应一个可滑动的slide：

<ion-content padding>
  <ion-slides [options]="cardSlideOptions">
    <!-- 循环渲染每个行程卡片 -->
    <ion-slide *ngFor="let subtrip of trips">
      <ion-card [ngStyle]="{'background-color': subtrip.borderColor}">
        <ion-item text-wrap>
          <ion-avatar item-start>
            <img src="assets/img/car.png" style="width: 50px; height: 50px; border-radius: 50%;">
          </ion-avatar>
          <p>{{ subtrip.id }}</p>
        </ion-item>
        <!-- 这里可以添加更多卡片内容，比如行程描述、操作按钮等 -->
      </ion-card>
    </ion-slide>
  </ion-slides>
</ion-content>

2. 卡片滑动的参数配置 #

在页面的.ts文件里添加专属配置，让卡片滑动更贴合需求：

import { Component } from '@angular/core';

@Component({
  selector: 'page-trips',
  templateUrl: 'trips.html'
})
export class TripsPage {
  // 模拟你的行程数据
  trips = [
    { id: '行程001', borderColor: '#f8f8f8' },
    { id: '行程002', borderColor: '#eeeeee' },
    { id: '行程003', borderColor: '#f0f0f0' }
  ];

  // 卡片滑动的配置项
  cardSlideOptions = {
    slidesPerView: 'auto', // 自动适配卡片宽度，显示尽可能多的可见卡片
    spaceBetween: 15, // 卡片之间的间距（单位：px）
    freeMode: true, // 开启自由滑动，滑动后不会强制对齐到某个卡片
    pagination: false // 隐藏底部指示器（不需要的话可以关掉）
  };
}

3. 可选样式优化 #

如果想让卡片更美观，在页面的.scss文件里加点样式：

ion-card {
  min-width: 280px; // 设置卡片最小宽度，避免太窄
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
  margin: 0; // 去掉默认margin，配合slides的spaceBetween控制间距
}

补充说明 #

如果不想用ion-slides，也可以用纯CSS实现横向滑动：给父容器设置overflow-x: auto; white-space: nowrap;，给每个卡片设置display: inline-block;，但这种方式的滑动流畅度和移动端适配性不如ion-slides，更推荐官方组件。

内容的提问来源于stack exchange，提问作者lei lei