AngularJSでSwiperを使用してスライドできないスクロールチャートを作成する問題の解決策

Swiper は現在人気のモバイル タッチ スライド プラグインで、シンプルで使いやすく、多くのフロントエンド開発者に歓迎されています。

今日、Swiper を使用しているときにこの問題に遭遇しました:

angularjs 動的ループを使用して swiper-slide クラスを生成し、swiper-wrapper で 6 つを超えるスライディング ページを生成しますが、2 番目のページを描画できません。longSwipesRatio Modify を変更してみてください値を最小値に設定しましたが、それでも動作しません。

<div class="swiper-wrapper" >
<!-- =======循环部分======= -->
<div class="swiper-slide" ng-repeat="result in mediaList">
//此处为一个滑动页内容
</div>
<!-- ============== -->
</div>
</div>

テスト中に、n 個のループ部分を手動でコピーすると、n 個のブロックをスライドできることがわかりました。ページ ドキュメントが変更されるようにウィンドウ サイズを手動で調整した後 (動的応答)、スライドできることがわかりました。通常は。

そこで私は、スワイパーのメカニズムは次のように推測しました。初期化中に、スワイパー ラッパー クラスの下にスワイパー スライド クラス ブロックがいくつあるかを自動的にスキャンし、次にスライドできるブロックの数をスキャンします。 Angular では、常にスワイパーの初期化後に定義され、スワイパーはスライドの数を正しくスキャンできない (実際にはループするテンプレートを見つける) ことができないため、移動できません。

原因がわかったら、適切な薬を処方するだけです。 Swiper の API を確認すると、observer とobservParents の 2 つのパラメータがあることがわかりました。前者は、スワイパーのスタイルを変更するとき (非表示/表示など)、またはスワイパーのサブ要素を変更するときに動的チェッカーを起動し、自動的にスワイパーを初期化します。後者の原理は前者と同じですが、観察が Swiper の親要素に適用される点が異なります。どちらのデフォルト値も false です。 したがって、これらの 2 行を元のスワイパー初期化コードに追加するだけです。

りー