动态列数 离子 2.

Question

我正在使用 Ionic 2 构建一个移动应用程序，我的要求之一是如果在平板电脑中显示，则一行显示 4 张卡片，如果在移动设备中显示，则一行仅显示 2 张卡片。我想知道实现这一目标的最佳方法是什么？

Answer 1

你基本上可以给他们一个最小宽度的宽度，让他们重新定位自己。类似的东西

.card {
    width: calc(100%/4);
    min-width: calc(356px/2); // most minimum width of your container on a phone.
}

不过，最好的选择可能是走响应式路线。只需使用@media屏幕和（max-width="768px"）或任何您需要设置它并更改那里的值。

.card {
    width: calc(100%/4);
}
@media screen and (max-width:768px){
    .card {
         width: calc(100%/2);        
    }
}

如果您希望通过角度应用它，您可以使用 *ngStyle 执行此操作。只需创建一个字符串以匹配该值，然后运行 *ngIf 语句以应用单独的值。

Answer 2

我没有尝试过这个，但你可能想在某个地方使用 ionic 平台，你可以尝试在 <ion-col> 元素上，你可以为 iPhone 添加[attr.width-50]，为 iPad 添加[attr.width-25]。

<ion-col [attr.width-50]="isIphoneOrIpad" [attr.width-25]="!isIphoneOrIpad">

然后，您可以使用平台在相应的.ts文件中编写返回布尔值的逻辑。

import { Platform } from 'ionic-angular';
@Component({...})
export MyPage {
  isIphoneOrIpad:boolean;  
  constructor(public platform: Platform) {
    this.isIphoneOrIpad = this.platform.is('iphone') || this.platform.is('ipad');
  }  
}

这将返回 true 或 false，然后相应地显示属性。

有关更多信息，请查看 Ionic 2 平台文档