JavaScript - スワイパー画像をスワイプできません

Question

質問の件名は、要求されたデータがなかったため vue で書かれていたため、偽のデータが作成されました:

これは動的に生成された img タグです

次にページで使用します:

しかし、クロムを開いてエフェクトを見てみると、これはスワイプできず、最初の写真しか表示されないことがわかりました。

動的に生成された画像も正しく、構造は以下のようになっていますが、なぜスワイプできないのでしょうか?

そして奇妙なのは、質問者が動的に生成された img タグを 3' <p class="swiper-slide">Slide 1</p>

' に変更したため、スワイプできなくなったことです。 swiper の公式 Web サイトを参照しました。ドキュメントには追加のスワイプ方法がありません。これの何が問題なのか聞いてもいいですか?

Answer 1

イベントはバインドされていない可能性があります。マウントされたライフサイクルに新しいスワイパーを追加してみるか、vue-swiper を使用して他のユーザーによってカプセル化することができます。

Answer 2

理由は十分に詳しく説明されていませんが、「動的生成」領域にあるのではないかと推測することしかできません。これは、イベントを要素にバインドし、動的に生成された要素に対して従来のメソッド ele.addEventListener に従っていると失敗するようなものです。

Answer 3

元の投稿者が書いたコードで、swiper-container が繰り返し使用されているのはなぜですか? ? ?

Answer 4

私が書いたものをあげますので、比較してみてください
html

リーリー

js:

リーリー

Answer 5

swiper.update() 試してみる

Answer 6

理由は、swiperの初期化位置が間違っているためです。imgタグを動的に生成するには、すべてのタグがインターフェイス上にレンダリングされた後に新しいswiperを作成する必要があります。元のコードは次のとおりです。これ

リーリー

バインドされたデータソースはコンポーネントを非同期で生成するように変更されたため、スワイパーの初期化操作はコンポーネントがロードされた後のライフサイクル、つまりVueオブジェクトのマウントされた関数で実行する必要があります