Vue学习笔记 项目 7.3 轮播图插件 vue-awesome-swiper的使用

1.vue-awesome-swiper组件的安装：

npm install vue-awesome-swiper --save
如果指定版本号：
npm install vue-awesome-swiper@2.6.7 --save

2. vue-awesome-swiper的官网：

https://github.com/surmon-china/vue-awesome-swiper

3.使用vue-awsome-swiper：

main.js中增加:

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)

这里有出现一个有意思的，就是 我吧本来应该放在main.js中的代码 放置到router/index.js中也是可以用的。 我想应该是main.js中一开始就调用了路由组件。所以也就一并执行了。

4.新建轮播图组件 并添加至Home.vue组件中

<template>
  <div>
    <home-header></home-header>
    <home-swiper></home-swiper>
    <div>test</div>
  </div>
</template>

<script>
import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
export default {
  name: 'Home',
  components: {
    HomeHeader,
    HomeSwiper
  }
}
</script>

<style>
</style>

5.添加需要轮播的元素至<template></template> （这是指另外新建的轮播图子组件中的<template>）

  <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>
以下3个元素不要的话可以删掉 
//这个是左箭头
    <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>

6. 设置轮播内容：

1. 设置data:

<script>
export default {
  name: 'HomeSwiper',
  data () {
    return {
      swiperOption: {
//绑定分页元素
        pagination: '.swiper-pagination',
//设置循环，意思就是分页到最后一张时，在往后划就自动滑到第一张
        loop: true
      },
      swiperList: [
        {
          id: '0001',
          imgUrl: 'http://img1.qunarzz.com/piao/fusion/1811/31/da037478f37cf202.jpg_750x200_fe28d396.jpg'
        },
        {
          id: '0002',
          imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20192/3cdc880b14b7fc6f9c59e6f0f89b857d.jpg_750x200_f5a7ad47.jpg'
        }]
    }
  }
}
</script>

• 数据渲染至页面：

  <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>

为了在图片元素完整加载好之前，需要预先预留好空间。所以需要设置如下样式：

<style lang="stylus" scoped>
//设置滚动条样式颜色（就那几个圆点）
//因为.swiper-pagination-bullet-active 这个类不是Swiper组件中的类 所以需要穿透过去
.wrapper >>> .swiper-pagination-bullet-active
  background: #fff
//这个是设置好元素空间的固定高度
.wrapper
  overflow: hidden
  width: 100%
  height: 0
这里的意思是高度设置为宽度的26.67% 这个比例就是图片的高/宽的比例
  padding-bottom: 26.67%
  background: #eee
  // height: 26.68vw
  .swiper-img
    width: 100%
</style>

实现效果：

以上就是vue-awesome-swiper的一般应用。其他方面的可操作官方文档说明：

https://www.swiper.com.cn/api/index2.html    

源代码和使用方法：

https://github.com/surmon-china/vue-awesome-swiper