swiper.jsを使ってタブ項目の切り替えを実装するが、各タブ項目の高さが異なり非同期でデータが読み込まれる swiper-containerの適応高さにAutoHeight: trueを設定しているが、コンテンツの高さ <画面の高さが高い場合、この属性は機能しませんjs の設定で変更しましたが、空白領域を下にスライドできます。解決方法
スワイパーコンテナがPボックスであるため、最大のサブタブの高さがそれ自体の高さとして使用されるため、以前にこの問題に遭遇しました。したがって、CSSを使用するだけでは十分ではなく、判断するためにいくつかのJSを追加する必要があります。
解決策: 1. まずタブ切り替えイベントのコールバックをリッスンし、タブ切り替えが完了したら、現在のタブ コンテンツの高さを取得し、js で外部スワイパー コンテナーを現在のコンテンツの高さに設定します。 2. 次に、動的コンテンツがロードされた後、原理は同じで、コンテンツの高さを手動で取得し、外側のコンテナの高さを現在のコンテンツの高さに設定する必要があります。
具体的なコードは手元にないので、後で投稿できますが、アイデアはありますので、間違いなく実装できると思います。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
スワイパーコンテナがPボックスであるため、最大のサブタブの高さがそれ自体の高さとして使用されるため、以前にこの問題に遭遇しました。したがって、CSSを使用するだけでは十分ではなく、判断するためにいくつかのJSを追加する必要があります。
解決策:
1. まずタブ切り替えイベントのコールバックをリッスンし、タブ切り替えが完了したら、現在のタブ コンテンツの高さを取得し、js で外部スワイパー コンテナーを現在のコンテンツの高さに設定します。
2. 次に、動的コンテンツがロードされた後、原理は同じで、コンテンツの高さを手動で取得し、外側のコンテナの高さを現在のコンテンツの高さに設定する必要があります。
具体的なコードは手元にないので、後で投稿できますが、アイデアはありますので、間違いなく実装できると思います。