Swiper--vue

swiper配置过程

第一步： 安装依赖

npm i swiper@5 --save

npm i vue-awesome-swiper@3 --save

第二步： 全局安装 在main.js里面操作： import VueAwesomeSwiper from 'vue-awesome-swiper'

/* 在node_modules里面找到swiper文件夹里面的css文件 */
import 'swiper/css/swiper.css'

/* 使用Vue.use来注册一个轮播图插件 */
Vue.use(VueAwesomeSwiper)

第三步： 在自己的组件文件夹中 新建一个轮播图组件 MySwiper.vue： 并复制以下代码到你的组件中：

<template>
  <div id="app">
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
        },
      },
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  }
};
</script>

<style>
.swiper-container {
  width: 500px;
  height: 400px;
  border: 1px solid red;
}
</style>

Vue环境下Swiper的注意项

1. Swiper的点击事件无法使用：添加修饰符.native
2. 在异步获取图片渲染轮播图时LOOP（无缝切换）模式失效

<template>
  <div id="app">
    <!-- 因为在main.js中全局引入过了，所以组件可以直接拿来用 -->
    <swiper ref="mySwiper" :options="swiperOptions" v-if="imgList.length">
      <!--  @click.native 如果组件使用点击事件无效 可以使用修饰符.native 转成原生事件 -->
      <swiper-slide
        v-for="(v, i) in imgList"
        :key="i"
        @click.native="goto(v.url)"
      >
        <img :src="v.imgurl" width="100%" height="100%" />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "App",
  created: function () {
    /* 数据是异步的， 数据还没有到情况下，轮播图组件已经开始加载了，
    导致配置无缝轮播的时候效果出不来 怎么办？*/
    /* 解决方法：使用条件判断，当数据还没有获取到的时候不加载轮播图，
    数据到了，再加载 */
    axios.get("/data/imgJson.json").then((res) => {
      this.imgList = res.data.imglist;
      /* 使用refs的方法 必须要配置$nextTick获取到dom之后再执行slideTo方法 */
      /* 在这里使用$nextTick方法 是因为组件是后来有数据的时候加载上去的，
      担当于更新了dom的值，这时候想获取dom就必须借助于$nextTick方法 */
      this.$nextTick(()=>{
        /* 在异步操作里面slideTo第一个参数表示第几张  */
        this.$refs.mySwiper.swiper.slideTo(2,1000,false)
      })
    });
  },
  methods: {
    goto: function (url) {
      /* console.log(url) */
      /* window.open会打开一个新的窗口 */
      window.open(url);
      /* location.href在当前页跳转 */
      /* location.href = url; */
    },
  },
  data() {
    return {
      imgList: [],
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
        },
        loop:true,
        autoplay: {
          delay: 1000,
          /* 如果设置为true，当切换到最后一个slide时停止自动切换。（loop模式下无效）。 */
          stopOnLastSlide: false,
          /* 如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。 */
          disableOnInteraction: false,
        },
      },
    };
  },
  
  mounted() {
  },
};
</script>

<style>
.swiper-container {
  width: 700px;
  height: 500px;
  border: 1px solid red;
}
</style>