nuxt——swiper的使用

小曲曲

已于 2022-03-23 16:27:38 修改

阅读量3.7k

点赞数

分类专栏： nuxt 文章标签：前端

于 2022-03-21 18:08:32 首次发布

本文链接：https://blog.csdn.net/weixin_43848576/article/details/123641023

版权

nuxt 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了在Vue项目中使用Swiper组件遇到的两个主要问题及其解决方案。问题一是装包或引入时的版本冲突，通过降级Swiper版本可以解决。问题二是服务端渲染时`window`未定义，采用方案二的插件形式引入并配置解决。提供了详细的代码示例，包括废弃的页面内直接使用和推荐的插件方式，但注意不同版本的Swiper可能会影响轮播图的显示，需要试验找到适用的版本。

摘要由CSDN通过智能技术生成

装包

== bug1：装包报错，或者引入报错，是版本的为题，降低版本即可解决==
== bug2：页面刷新后报错：window在服务端不识别，所以使用后面的方案二==

"swiper": "^4.0.7",
"vue-awesome-swiper": "^3.1.3"

方案一：页面中使用（废弃）

<div>
		<swiper
          ref="mySwiper"
          :options="swiperOptions"
          style="width: 200px; height: 200px"
        >
          <swiper-slide
            v-for="item in 5"
            :key="item"
            style="height: 200px; background: blue"
          >
            11
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
</div>

<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  data() {
    return {
      swiperOptions: {
        loop: true,
        slidesPerView: 3, // 一屏3个
        centeredSlides: false, // 第一个默认居左
        spaceBetween: 70, // 间隔
        autoplay: true, // 自动播放
        grabCursor: true, // 鼠标放上去显示小手
        pagination: {  // 分页
          el: ".swiper-pagination", //与slot="pagination"处 class 一致
          clickable: true, //轮播按钮支持点击
        },
        on: {
          slideChange() {
            console.log("onSlideChangeEnd", this);
          },
          tap() {
            console.log("onTap", this);
          },
        },
      },
    };
  },
  components: {
    swiper,
    swiperSlide,
  },
};
</script>

方案二：使用插件的形式（推荐）

== bug：有的版本可能轮播图不会正常展示，需要试 ==

"swiper": "^5.4.5",
"vue-awesome-swiper": "^4.0.0",
"nuxt": "^2.15.8",

plugins/swiper.js

import Vue from 'vue'
import css from 'swiper/css/swiper.css' // 注意css路径
import VueAwesomeSwiper from 'vue-awesome-swiper'
export default () => {
Vue.use(VueAwesomeSwiper,{css})
}

nuxt.config.js

 plugins: [
    { src: "~/plugins/swiper.js", ssr: false }
  ],

components/swiperCpt.vue

<template>
  <div v-swiper:mySwiper="swiperOption" style="width: 100%">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="item in list" :key="item.id">
        <div>
          <img
            :src="item.fileId"
            class="w100 mb-20"
            style="height: 352px; border-radius: 8px"
            alt=""
          />
          <p class="size-24 line-1">{{ item.title }}</p>
          <p>
            {{ item.information }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      swiperOption: {
        // loop: true,
        slidesPerView: 3,
        centeredSlides: false,
        spaceBetween: 70,
        autoplay: true,
        grabCursor: true,
      },
    };
  },
  props: ["list"],
  mounted() {},
};
</script>