vue项目笔记（10）-使用vue插件vue-awesome-swiper

痛定思痛。 2021-09-16 02:20 543阅读 0赞

**vue插件vue-awesome-swiper的使用方法**

vue-awesome-swiper插件用于快速创建轮播图，其中2.6.7版本较为稳定且无bug，我们以此为例，介绍giant插件的使用方法。

1、安装插件

npm install vue-awesome-swiper@2.6.7 --save

2、在入口文件main.js中引入

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

3、创建Swiper组件，在template模板中引入以下代码（其中swiper-scrollbar，swiper-button-prev，swiper-button-next均按需添加）。

<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
        
        <swiper-slide>I'm Slide 1</swiper-slide>
        <swiper-slide>I'm Slide 2</swiper-slide>
        <swiper-slide>I'm Slide 3</swiper-slide>
        <swiper-slide>I'm Slide 4</swiper-slide>
        <swiper-slide>I'm Slide 5</swiper-slide>
        <swiper-slide>I'm Slide 6</swiper-slide>
        <swiper-slide>I'm Slide 7</swiper-slide>
        
        <div class="swiper-pagination"  slot="pagination"></div>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
        <div class="swiper-scrollbar"   slot="scrollbar"></div>
      </swiper>

4、在对应的home组件中引入，注册。

import HomeHeader from "./components/Header";
    import HomeSwiper from "./components/Swiper"
    export default {
      name: "Home",
      data() {
        return {};
      },
      components: {
        HomeHeader,
        HomeSwiper
      }

5、将第3步中的文本修改为图片，改变图片的尺寸，轮播图基本显示。

.swiper-img
        width 100%

6、注意：在第5步中的样式设置后，刷新项目，在图片未加载出来时swiper后面的标签，会在swiper标签的位置，具体表现为抖动现象，当图片加载完成后，才会被挤到下方。那么如何解决这个问题呢？具体方法如下：

（1）在swiper标签外用div包裹

（2）修改样式

.wrapper
        width 100%
        overflow hidden
        height 0
        // 其中26.67%为轮播图片的宽高比
        padding-bottom 26.67%
        background #eee
        .swiper-img
            width 100%

备注：其中background \#eee可用于图片没有加载出来时的背景显示。

7、轮播设置及小圆点样式修改

（1）配置swiperOption对象（轮播设置）

export default {
      name: "HomeSwiper",
      data() {
        return {
          swiperOption: {
            pagination: ".swiper-pagination",
            loop:true,
            autoplay: 3000
          }
        };
      }
    };

（2）修改小圆点样式

在浏览器中通过F12查看小圆点样式，是通过一个class名为swiper-pagination-bullet-active的标签控制的，所以可以通过修改该标签的样式实现。初步设想如下：

.swiper-pagination-bullet-active
            background red

发现，没有起到任何作用。这是为什么呢？分析后发现，swiper-pagination-bullet-active这个属性并没有在Swiper组件中出现，所有没有起到作用。解决方案：做以下修改，实现样式的穿透即可，不受scoped的限制。

.wrapper >>> .swiper-pagination-bullet-active
        background red

效果图（小圆点的样式已经改变）：

![70][]

8、此时轮播的图片是固定的图片，做一下完善，使用v-for循环。注意：每个轮播图片id属性需要是字符串（String）。

代码修改如下：

<template>
    <div class="wrapper">
      <swiper :options="swiperOption">
        
        <swiper-slide v-for="item of swiperList" :key="item.id">
          <img class="swiper-img" :src="item.imgUrl">
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
    </template>
    <script>
    export default {
      name: "HomeSwiper",
      data() {
        return {
          swiperOption: {
            pagination: ".swiper-pagination",
            loop: true,
            autoplay: 3000
          },
          swiperList: [
            {
              id:"0001",
              imgUrl:
                "http://img1.qunarzz.com/piao/fusion/1806/8d/09723d20a9b88402.jpg_750x200_56b1edfa.jpg"
            },
            {
              id: "0002",
              imgUrl:
                "http://img1.qunarzz.com/piao/fusion/1807/c6/44fce1467be17702.jpg_750x200_406f5fc3.jpg"
            }
          ]
        };
      }
    };
    </script>
    <style scoped lang="stylus">
    .wrapper >>> .swiper-pagination-bullet-active
        background red
    .wrapper
        width 100%
        overflow hidden
        height 0
        // 其中26.67%为轮播图片的宽高比
        padding-bottom 26.67%
        background #eee
        .swiper-img
            width 100%
    </style>

[70]: /images/20210802/7e41c50689a74198b382fa839383a1ab.png