Ionic 2/3 适配方案：如何在宽屏显示2个ion-slide？

嘿，我刚好碰到过一模一样的需求！其实你只需要用到Ionic Slides底层（基于Swiper）的响应式断点配置，就能完美实现小屏显示1个slide、宽屏显示2个的效果了！

你之前尝试固定slidesPerView数值的方式，没办法根据屏幕尺寸动态调整，所以才会卡壳。下面是具体的实现方案：

步骤1：定义响应式配置项 #

在你的组件代码里，先写好轮播的配置规则，通过breakpoints根据屏幕宽度设置不同的显示数量：

如果是Angular项目，在组件的.ts文件里添加：

slideOptions = {
  slidesPerView: 1, // 默认给小屏设备显示1个完整slide
  spaceBetween: 10, // 可选：设置slide之间的间距，让布局更美观
  breakpoints: {
    // 当屏幕宽度≥768px时（可以根据你的需求调整这个阈值，比如改成600px适配平板），切换成显示2个slide
    768: {
      slidesPerView: 2,
      spaceBetween: 20
    }
  }
};

步骤2：在模板中绑定配置 #

把上面的配置绑定到ion-slides的options属性上就行：

<ion-slides [options]="slideOptions">
  <ion-slide>
    <h1>Slide 1</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide 2</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide 3</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide 4</h1>
  </ion-slide>
</ion-slides>

额外小提示 #

• 要是你用的是Vue或者React项目，写法逻辑完全一致，只是绑定options的语法稍有不同：Vue用:options="slideOptions"，React用options={slideOptions}。
• 你可以随时调整breakpoints里的屏幕宽度阈值，适配不同的设备尺寸，比固定数值灵活太多啦！

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