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 行を元のスワイパー初期化コードに追加するだけです。

var mySwiper = new Swiper('.swiper-container',{
pagination : '.swiper-pagination',
paginationClickable: true,
longSwipesRatio: 0.3,
touchRatio:1,
observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true,//修改swiper的父元素时，自动初始化swiper
})

上記は、AngularJS でスライドできないスクロール画像を作成するために Swiper を使用するときにエディターが紹介する解決策です。ご質問があれば、私とエディターにメッセージを残してください。時間内に返信いたします。また、PHP 中国語 Web サイトをサポートしていただきありがとうございます。

AngularJS でスライドできないスクロール画像を作成するために Swiper を使用する問題を解決する方法に関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。