【ionic】ion-cardが重なってしまう対処法 ion-virtual-scroll

なに

ionicで開発をしているがion-cardコンポーネントの1つ１つがたまに重なってしまう現象があった。
この上の階層にはion-virtual-scrollというコンポーネントを使用しており、その子要素にion-cardが存在している。

対処法

このion-virtual-scrollにitem1つ1つの高さを指定するfunctionを記述する。
そして、tsファイルの中にfunctionの記述をする。

編集前

<ion-virtual-scroll [items]="stock_list" approxItemHeight="450px">

編集後

// [itemHeight]="itemHeightFn"　を追記
<ion-virtual-scroll [items]="stock_list" approxItemHeight="450px" [itemHeight]="itemHeightFn">

    /**
     * ion-cardのサイズ調整
     */
    itemHeightFn(item, index) {
        console.log('ゴリラがんばれ');
        if (window.innerWidth < 480) {
        //モバイルサイズの場合の記述
            return 280;
        }

        if (window.innerWidth <= 768 && window.innerWidth > 480) {
        //タブレットサイズの場合の記述
            return 450;
        }

        if (window.innerWidth > 768) {
        //PCサイズの場合の記述
            return 550;
        }
    }

条件のところで数字にしているところはマジックナンバーになってしまうため、あとは何かわかりやすい定数にしておく。