Vue项目使用vue-awesome-swiper轮播插件 -少儿编程-信息学奥赛-宜宾少儿编程-宜宾市野牛网络科技有限公司

Vue项目使用vue-awesome-swiper轮播插件

浏览次数：1172

Vue vue-awesome-swiper 宜宾网站建设

首页第一个逻辑功能用到的便是轮播图啦，果然前端虽然技术杂，但是开发做起来基本上都是拿别人造好的来用就行。
　　 
1.首先呢，我们去gitHub上面找一个vue-awesome-swiper插件，我跟着Dell老师找的下面这一版。 
 
为了保证整个项目的稳定性，我们安装2.6.7版本。
```javascript
npm install vue-awesome-swiper@2.6.7 --save
```
2.安装好以后如何使用呢？因为我们这个项目可能在各个页面上都会用到swiper轮播这个插件，所以我们就在全局引入这个插件。进入项目src文件夹下的main.js入口文件，加入如下几行代码：
```javascript
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
 
// require styles
import 'swiper/dist/css/swiper.css'
 
Vue.use(VueAwesomeSwiper, /* { default global options } */)
```
接下来就是使用方法啦，具体模板如下：
```javascript
<template>
  <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>
</template>
```
由于我的项目中只进行图片轮播，不需要滚动条和导航按钮，所以我的代码如下：
```javascript
<template>
  <swiper :options="swiperOption">
    
    <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样式代码如下：
```javascript
 .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中分页器的使用
```javascript
<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的限制来修改样式了。具体代码如下：
```javascript
.wrapper >>> .swiper-pagination-bullet-active
    background:#fff
```
3.最后，我们利用v-for来实现图片的循环输出，最终代码如下：
```javascript
<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>
```

Vue项目使用vue-awesome-swiper轮播插件

留言条数·0