Vue学习笔记-项目开发2.1轮播图插件 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>）

  <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、设置轮播内容：

①设置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>

7、效果图

以上就是vue-awesome-swiper的一般应用。其他方面的可操作官方文档说明：
https://www.swiper.com.cn/api/index2.html
源代码和使用方法：
https://github.com/surmon-china/vue-awesome-swiper