后盾网lavarel视频项目---Vue项目使用vue-awesome-swiper轮播插件

后盾网lavarel视频项目---Vue项目使用vue-awesome-swiper轮播插件

1、总结

一句话总结：

vue中的插件的使用和js插件的使用同样的简单，只是vue插件的引入过程有些不一样

项目src文件夹下的main.js入口文件中

import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper, /* { default global options } */)

 

 

2、前端进击之路——Vue项目使用vue-awesome-swiper轮播插件

转自或参考：前端进击之路——Vue项目使用vue-awesome-swiper轮播插件
https://blog.csdn.net/u014027876/article/details/81663080

　　
1.首先呢，咱们去gitHub上面找一个vue-awesome-swiper插件。
 

 

 

为了保证整个项目的稳定性，咱们安装2.6.7版本。

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

2.安装好之后如何使用呢？由于咱们这个项目可能在各个页面上都会用到swiper轮播这个插件，因此咱们就在全局引入这个插件。进入项目src文件夹下的main.js入口文件，加入以下几行代码：

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options } */)

接下来就是使用方法啦，具体模板以下：

<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>
    <!-- 若是须要导航按钮 -->
    <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>
</template>

因为个人项目中只进行图片轮播，不须要滚动条和导航按钮，因此个人代码以下：

<template>
  <swiper :options="swiperOption">
    <!-- slides -->
    <swiper-slide> 
        <img src=""/>
    </swiper-slide>
    <swiper-slide> 
        <img src=""/>
    </swiper-slide>
    <!-- 若是须要分页器 -->
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

完成上述代码之后就能够看到图片有轮播效果啦，可是图片大小与屏幕好像不匹配，这个时候咱们就要给每一个img标签加一个class，将其width设为100%就能够啦~

为了解决屏幕抖动问题，咱们须要在swiper外面加一层class=“wrapper”的div包裹，而后在css样式中利用padding-bottom属性来完成图片的自适应高度占位，防止图片未加载出来到加载完成过程当中屏幕出现抖动。具体css样式代码以下：`

.wrapper
     overflow:hidden
     width:100%
     height:0
     padding-bottom:30.48%
     background: #eee
     .swiper-img
     width:100%

敲黑板！重点内容来啦~~
为何采用padding-bottom就能够实现高度自适应呢？由于padding-bottom以百分比进行显示的时候是相对于父元素的width而言的。咱们将swiper的父级元素wrapper宽度设置为100%是相对于wrapper父元素的宽度而言的，padding-bottom设置为30.48%也是相对于wrapper父元素的宽度而言的，但因为wrapper的宽度已经和它父元素宽度相等（100%）了，因此padding-bottom就至关于wrapper元素的高宽比就是30.48%，它的高度就会相对于它的宽度自动撑开30.48%。

接下来讲说swiper中分页器的使用

<script> export default { name: 'HomeSwiper', data() { return { swiperOption: { // some swiper options/callbacks // 全部的参数同 swiper 官方 api 参数 pagination: '.swiper-pagination', //分页器挂载到swiper-pagination类对应的元素上 loop: true //开启轮播图先后循环模式 } } }, } </script>

设置好分页器以后轮播图上就有了几个小圆点了，默认选中的圆点是蓝色的，可是设计图中是白色的，那么这就很致命了，因而咱们找到小圆点对应的元素是被.swiper-pagination-bullet-active控制的，因此咱们从这个上面入手去修改颜色。
然鹅这个类不是咱们当前组件中定义的元素，因此在以scoped修饰的css代码中咱们不能直接修改该元素的样式，这个时候，咱们就要用到样式“穿透”，从而能够不受scoped的限制来修改样式了。具体代码以下：

.wrapper >>> .swiper-pagination-bullet-active
    background:#fff

3.最后，咱们利用v-for来实现图片的循环输出，最终代码以下：

<template>
    <div class="wrapper">
        <swiper :options="swiperOption" >
            <swiper-slide v-for='item of swiperList' :key="item.id">
                <img :src="item.imgUrl" class="swiper-img">
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script> export default { name: 'HomeSwiper', data: function () { return { swiperOption: { pagination: '.swiper-pagination', loop: true }, swiperList:[{ id:"0001", imgUrl:"http://img1.qunarzz.com/piao/fusion/1801/1a/94428c6dea109402.jpg_640x200_2cf590d8.jpg" },{ id:"0002", imgUrl:"http://img1.qunarzz.com/piao/fusion/1802/42/7c92b9a381e46402.jpg_640x200_1cdce2a4.jpg" }] } } } </script>

<style lang="stylus" scoped> .wrapper >>> .swiper-pagination-bullet-active background:#fff .wrapper overflow: hidden width: 100% height: 0 padding-bottom: 30.48% background: #ccc .swiper-img width: 100% </style>

---

当当当~~最终效果图呈上来咯：