[nuxt3]ページ遷移で入って来た時、SwiperAutoPlayが止まってしまう件について

トップ ― [nuxt3]ページ遷移で入って来た時、SwiperAutoPlayが止まってしまう件について

投稿者 : TomoyaOkada

公開日:

更新日:

[nuxt3]ページ遷移で入って来た時、SwiperAutoPlayが止まってしまう件について

Vue/Nuxt

目次

あるページ内にSwiperを入れた所、ページ遷移で入ってきた時のみ自動再生が止まってしまう現象に遭遇しました。

状況

・ページ遷移で入ってきた時に自動再生が動かなくなる
・その場でリロードすると正常に動く
・特にエラーが出ている様子なし


解決策

以下の記事にヒントがあったので試した結果、正常に動作するようになりました。
参考サイト

refでSwiper表示のフラッグを作っておき、watchで入ってきたタイミングで表示させる処理を行うようです。

const showSwiper = ref<boolean>(false)

watch(
  () => router name,
  (newValue) => {
    if (newValue === 'router name') {
      showSwiper.value = true
    } else {
      showSwiper.value = false
    }
  },
  { immediate: true }
)


<div v-if="showSwiper">...</div>


SPA周りはこのような小さなところで躓きがちなので、相変わらず難しいですね。
ちなみにapp.vue(グローバル)に配置されるSwiperの自動再生は特別な処理をしなくても動きます。



記事をシェア

  • Twitter
  • FaceBook
  • hatena