Vue - Vue 中 vue-awesome-swiper 轮播组件的使用

水深无声 2021-07-25 23:49 1563阅读 0赞

# vue-swiper轮播组件使用 #

## 一. vue-awesome-swiper官网 ##

[https://www.npmjs.com/package/vue-awesome-swiper][https_www.npmjs.com_package_vue-awesome-swiper]

## 二. 安装 vue-awesome-swiper 依赖 ##

`npm install swiper vue-awesome-swiper@3.1.3 --save`

## 三. main.js中 引入 vue-awesome-swiper ##

import VueAwesomeSwiper from 'vue-awesome-swiper'
    import 'swiper/css/swiper.css'
    Vue.use(VueAwesomeSwiper)

## 四. 测试 vue-awesome-swiper 是否可以正常使用 ##

**测试代码：**

<template>
      <div class="wrap">
        <swiper :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 {
      data() {
        return {
          swiperOptions: {},
        };
      },
    };
    </script>
    <style scoped>
    </style>

## 五. 若报错以下类似错误，请仔细查看本步骤；若无错误，页面正常显示，可跳过此步骤 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center]  
**解决方案：**

1.  进入 `package.json` 中查看 `swiper` 安装的版本  
    发现版本是6.1.2  
    ![在这里插入图片描述][20200824165820951.png_pic_center]
2.  如果安装6.0以上版本，需要引入另外一个 css  
    `import 'swiper/swiper-bundle.css'`

## 六. 使用轮播图可能会遇到的问题 ##

1.  轮播图左右箭头点击不生效  
    **原因：**  
    `vue-awesome-swiper` 安装版本原因  
    **解决方案：**  
    重新安装3.1.3版本 `vue-awesome-swiper`
2.  轮播图自动切换的时间间隔不生效  
    **原因：**  
    `vue-awesome-swiper` 安装版本原因  
    **解决方案：**  
    `swiper-slide` 添加属性 `data-swiper-autoplay`,属性值为时间（毫秒）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 1]

## 七. 一个轮播图实例 ##

<template>
      <div class="wrap">
        <swiper :options="swiperOption" ref="mySwiper">
          
          <swiper-slide v-for="item of swiperSlides" :key="item.id">
            <img :src="item.img" />
          </swiper-slide>
          
          
          <div class="swiper-pagination" slot="pagination"></div>
          
          <div class="swiper-button-prev swiper-button-black" slot="button-prev"></div>
          
          <div class="swiper-button-next swiper-button-black" slot="button-next"></div>
          
          
        </swiper>
      </div>
    </template>
    
    <script>
    import { swiper, swiperSlide } from "vue-awesome-swiper";
    export default {
      components: {
        swiper,
        swiperSlide,
      },
      data() {
        return {
          swiperOption: {
            //分页器设置
            pagination: {
              el: ".swiper-pagination",
              clickable: true,
            },
            //左右箭头点击
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },
            notNextTick: true,
            //循环
            loop: true,
            //设定初始化时slide的索引
            initialSlide: 0,
            //自动播放，等同下面autoplay设置
            autoplay: true,
            // autoplay: {
            //     delay: 3000,
            //     stopOnLastSlide: false,
            //     disableOnInteraction: true,
            // },
            // 设置轮播切换效果
            effect: "slide",
            //轮播切换动速度
            speed: 800,
            //轮播滑动方向
            direction: "horizontal",
            //小手掌抓取滑动
            // grabCursor : true,
            //滑动之后回调函数
            on: {
              slideChangeTransitionEnd: function () {
                // console.log(this.activeIndex);//切换结束时，告诉我现在是第几个slide
              },
            },
          },
          //本数组图片地址仅供参考，请以实际地址为准
          swiperSlides: [
            {
              id: "001",
              img: "static/img/2.jpg",
            },
            {
              id: "002",
              img: "static/img/3.jpg",
            },
            {
              id: "003",
              img: "static/img/4.jpg",
            },
          ],
        };
      },
      computed: {
        swiper() {
          return this.$refs.mySwiper.swiper;
        },
      },
      mounted() {
        //可以使用swiper这个对象去使用swiper官网中的那些方法
        //console.log('this is current swiper instance object', this.swiper);
        // this.swiper.slideTo(0, 0, false);
      },
    };
    </script>
    
    <style scoped>
    .wrap{
      width: 100%;
      height: 500px;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide img {
      width: 100%;
      height: 100%;
    }
    </style>

**更多使用方法可访问Swiper官网：**  
[https://www.swiper.com.cn/api/index.html][https_www.swiper.com.cn_api_index.html]

[https_www.npmjs.com_package_vue-awesome-swiper]: https://www.npmjs.com/package/vue-awesome-swiper
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/57b7cef9ac7443e2a60d36f072910d8b.png
[20200824165820951.png_pic_center]: /images/20210725/40c612f3245e4d6c971c335e37866799.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210725/4a4a9544bdcd4e01ad43a88cc19faed9.png
[https_www.swiper.com.cn_api_index.html]: https://www.swiper.com.cn/api/index.html