Vue项目首页_首页轮播图

创建新分支：

把线上的分支拉到本地来：

git pull

git checkout index-swiper

轮播插件Vue-Awesome-Swiper

使用稳定版本v2.6.7

引入vue-awesome-swiper: npm install vue-awesome-swiper@2.6.7 --save

全局引入vue-awesome-swiper:

在main.js中引入：

import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles

import 'swiper/dist/css/swiper.css'

Vue. use( VueAwesomeSwiper)

新建Swiper.vue:

<template>
  <div class="wrapper">
    <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
      <swiper-slide>
        <img class="img-swiper" src="http://img1.qunarzz.com/piao/fusion/1801/1a/94428c6dea109402.jpg_640x200_2cf590d8.jpg" />
      </swiper-slide>
      <swiper-slide>
        <img class="img-swiper" src="http://img1.qunarzz.com/piao/fusion/1802/42/7c92b9a381e46402.jpg_640x200_1cdce2a4.jpg" />
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
export default {
  name: 'HomeSwiper',
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination'
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
  .wrapper >>> .swiper-pagination-bullet-active
    background: #fff
  .wrapper
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 31.25%
    background: #eee
    .img-swiper
      width: 100%
</style>

效果：

data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination'
      }
    }
  }

pagination控制分页的点。

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

穿透，只要是wrapper下的swiper-pagination-bullet-active背景色为白色。

优化：通过遍历列表循环输出

在data中添加swiperList：

swiperList: [
        {
          id: '0001',
          url: 'http://img1.qunarzz.com/piao/fusion/1801/1a/94428c6dea109402.jpg_640x200_2cf590d8.jpg'
        },
        {
          id: '0002',
          url: 'http://img1.qunarzz.com/piao/fusion/1802/42/7c92b9a381e46402.jpg_640x200_1cdce2a4.jpg'
        },
        {
          id: '0003',
          url: 'http://img1.qunarzz.com/piao/fusion/1802/51/e78f936a5b404102.jpg_640x200_c14f0b3a.jpg'
        }
      ]

<div class= "wrapper" >

<swiper :options = " swiperOption " ref = "mySwiper" @someSwiperEvent = " callback " >

<swiper-slide v-for = " item of swiperList " :key = " item . id " >

<img class= "img-swiper" :src= " item . url " />

</swiper-slide>

<div class= "swiper-pagination" slot= "pagination" ></div>

</swiper>

调整为可循环轮播：

把分支上的内容合并到主分支：

git checkout master

git merge origin/index-swiper

git push