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

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

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

1、安装插件

npm install [email protected] --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">
    <!-- slides -->
    <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>
    <!-- Optional controls -->
    <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组件中引入，注册。

  <div class="home">
    <home-header></home-header>
    <home-swiper></home-swiper>
  </div>

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

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

<swiper :options="swiperOption">
    <!-- slides -->
    <swiper-slide>
      <img class="swiper-img" src="http://img1.qunarzz.com/piao/fusion/1806/8d/09723d20a9b88402.jpg_750x200_56b1edfa.jpg">
    </swiper-slide>
    <swiper-slide>
      <img class="swiper-img" src="http://img1.qunarzz.com/piao/fusion/1807/c6/44fce1467be17702.jpg_750x200_406f5fc3.jpg">
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>

.swiper-img
    width 100%

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

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

<div class="wrapper">
  <swiper :options="swiperOption">
    <!-- slides -->
    <swiper-slide>
      <img class="swiper-img" src="http://img1.qunarzz.com/piao/fusion/1806/8d/09723d20a9b88402.jpg_750x200_56b1edfa.jpg">
    </swiper-slide>
    <swiper-slide>
      <img class="swiper-img" src="http://img1.qunarzz.com/piao/fusion/1807/c6/44fce1467be17702.jpg_750x200_406f5fc3.jpg">
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </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

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

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

代码修改如下：

<template>
<div class="wrapper">
  <swiper :options="swiperOption">
    <!-- slides -->
    <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>

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

猜你喜欢