Vue-awesome-swiper 在 nuxt 通用应用程序中不起作用答案

【问题标题】：Vue-awesome-swiper not working in nuxt universal appVue-awesome-swiper 在 nuxt 通用应用程序中不起作用
【发布时间】：2020-07-27 20:52:22
【问题描述】：

试图让 vue-awesome-swiper 在 nuxt 通用应用中工作。

我的包版本：

“swiper”：“^6.0.4”
“vue-awesome-swiper”：“^4.1.1”，

我注册了一个插件文件（全局注册指令）：vue-awesome-swiper.js

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

import 'swiper/swiper-bundle.css'

Vue.use(VueAwesomeSwiper /* { default options with global component } */)

然后是我的 nuxt.config.js：

 plugins: [
    { src: '~/plugins/vue-awesome-swiper', mode: 'client' },

然后是我的组件（全局注册指令）：componentSwiper

<template>
  <div v-swiper="swiperOption">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="1.jpg" alt="" />
      </div>
      <div class="swiper-slide">
        <img src="2.jpg" alt="" />
      </div>
      <div class="swiper-slide">
        <img src="3.jpg" alt="" />
      </div>
      <div class="swiper-slide">
        <img src="4.jpg" alt="" />
      </div>
      <div class="swiper-slide">
        <img src="5.jpg" alt="" />
      </div>
      <div class="swiper-slide">
        <img src="6.jpg" alt="" />
      </div>
      <div slot="button-prev" class="swiper-button-prev"></div>
      <div slot="button-next" class="swiper-button-next"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'componentSwiper',
  data() {
    return {
      swiperOption: {
        loop: true,
        slidesPerView: 3,
        spaceBetween: 30,
        autoplay: {
          delay: 5000
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  }
}
</script>

什么都没有移动，什么也没有发生。我的幻灯片卡住了，所以我一定是遗漏了什么？

【问题讨论】：

软件包版本是什么？
我认为this 可能会对您有所帮助。另外，请查看此处的示例 (github.com/surmon-china/surmon-china.github.io/tree/source/…)。它可能会帮助你。
尝试使用import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'
@Wonderman - 已添加。
@Tony - 我查过了，但找不到帮助。

标签： vue.js vuejs2 nuxt.js swiper swiperjs

【解决方案1】：

尝试将swiper 软件包的版本降级到以前的版本。

在您的 package.json 文件中查找包并修改版本：

...

  "swiper": "5.4.5",
  "vue-awesome-swiper": "4.1.1",

...

停止 Nuxt 运行并运行npm install

在 Github 上查看此问题以获取更多信息：https://github.com/surmon-china/vue-awesome-swiper/issues/680#issuecomment-655928225

【讨论】：

【解决方案2】：

请在 nuxt.config.js 中试试这个

plugins: [
 { src: '~/plugins/vue-awesome-swiper', ssr: false }

【讨论】：

【解决方案3】：

使用本地注册和刷卡：“5.4.5”

import { directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
 
export default {
  directives: {
    swiper: directive
  }
}

如果使用指令，导航按钮中插槽的使用无关紧要

【讨论】：

您能否详细说明包含 html 等的外观？

【解决方案4】：

您可以通过 awesome-swiper-vue 上的 ref 实现导航：

"swiper": "^7.4.1",
“vue-awesome-swiper”：“^4.1.1”，

如果你的 swiper 组件带有这样的 ref：

<section ref="mySwiperRef" v-swiper:mySwiper="swiperOption">
  ...
  <section slot="button-next" class="swiper-button-next" @click="nextSlideItem"></section>
</section>

您可以通过方法访问幻灯片事件：

export default {
  ...
  data() {
    return {
      swiperOption: {
        slidesPerView: "auto",
        spaceBetween: 20,
        freeMode: true,
        navigation: {
          nextEl: ".swiper-button-next",
        },
      },
    };
  },
  methods: {
    nextSlideItem() {
      this.$refs.mySwiperRef.swiper.slideNext();
    },
  },
}

或

this.$refs.mySwiperRef.swiper.slidePrev()

【讨论】：