「ion-slides」でスライド毎の縦スクロールを有効にする方法
コンポーネント「ion-slides」で表示されたスライド毎のコンテンツは、あくまで画像の表示用として作成されたコンポーネントのせいなのかバグなのかは分かりませんが、そのままではスクロールが有効になっていません。
スライド毎に文字を含むコンテンツを表示した際、画面に収まりきらずに縦スクロールが必要になったので、以下はその時の対処方法です。
コード
対処方法自体は簡単ですが、フレームワークによって生成された最終的なHTMLの構造を理解していないといけません。「ion-slides」コンポーネントを利用した場合、以下のようなHTMLが出力されます。
<ion-slides class="slides">
<div class="swiper-container">
<div class="swiper-wrapper">
<ion-slide class="swiper-slide">
<div class="slide-zoom">
コンテンツ１
</div>
</ion-slide>
<ion-slide class="swiper-slide">
<div class="slide-zoom">
コンテンツ２
</div>
</ion-slide>
</div>
</div>
</ion-slides>
「ion-slide」毎にスクロールが可能な設定するには以下のようなCSSを設定します。
.slide-zoom {
height: 100%;
overflow-y: auto;
}
パッと見「ion-slide」タグに「overflow-y: auto;」を設定すればいいように見えますが、実際に設定するとヘッダーとコンテンツが重なって表示されてしまうので、「.slide-zoom」クラスに設定するのがよさそうです。
本当はコンポーネントのプロパティで切り替えられたらいいんですけどね。（最初はどうせプロパティで切り替えられるだろう思っていましたが、探したらありませんでした）