一.Vue2.5开发去哪儿网app首页③——首页轮播图

 在码云中新建一个index-swiper分支，接下来的开发都会在这个分支上

 在项目中运行git pull将这个线上的分支拉到本地来

git pull

 切换到index-swiper分支

git checkout index-swiper

查看一下本地的状态确认是否正确

git status

然后在次分支上执行npm run dev 

接下来我们开始制作轮播图了，需要用到轮播插件Vue-Awesome-Swiper，参考https://github.com/surmon-china/vue-awesome-swiper

在项目中执行代码

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

在main.js中引入Vue-Awesome-Swiper

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

使用这个插件

Vue.use(VueAwesomeSwiper)

接下来在components文件夹下新建一个Swiper组件，写入代码，在swiper中绑定了:options="swiperOption"，所以我们也要在data中添加swiperOption对象

<template>
  <swiper :options="swiperOption">
    <!-- 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>

<script>
export default {
  name: 'HomeSwiper',
  data: function () {
    return {
      swiperOption: {}
    }
  }
}
</script>

<style scoped>

</style>

轮播中不需要左右箭头和灰色滚动条，所以把这三行代码删掉

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

同样，要使用这个组件，需要在Home组件中导入这个组件

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

我们可以在swiper-slide标签内使用图片

解决在页面显示时，图片显示之前，图片下面的文字会先显示，而覆盖图片区域的问题，使用padding-bottom撑开高度

<template>
  <div class="wrapper">
    <swiper :options="swiperOption">
      <swiper-slide class="swiper-img">I'm Slide 1</swiper-slide>
      <swiper-slide class="swiper-img">I'm Slide 2</swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeSwiper',
  data: function () {
    return {
      swiperOption: {}
    }
  }
}
</script>

<style lang="stylus" scoped>
  .wrapper
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 31.25%  //高度相对于宽度会自动撑开31.25%
    background-color: #eee  //图片加载完成前使背景显示浅灰色
    .swiper-img
      width: 100%
</style>

也可以用height: 31.25vw，但会有兼容性问题，尽量使用第一种方法

<style lang="stylus" scoped>
  .wrapper
    height: 31.25vw  //31.25%的viewport大小
    .swiper-img
      width: 100%
</style>

 接下来设置图片位置的小圆点，即图片的页码标注，在Swiper组件data的swiperOption对象中写入pagination: '.swiper-pagination'

来显示图片页码标注

<script>
export default {
  name: 'HomeSwiper',
  data: function () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination'
      }
    }
  }
}
</script>

还要修改图片页码标注的颜色，修改Swiper组件中的style

>>>表示样式穿透，让wrapper类下的所有出现swiper-pagination-bullet-active类的元素中的样式突破scoped的限制

<style lang="stylus" scoped>
  .wrapper >>> .swiper-pagination-bullet-active
    background-color: #fff
  .wrapper
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 26.67%  //高度相对于宽度会自动撑开26.67%
    background-color: #eee  //图片加载完成前使背景显示浅灰色
    .swiper-img
      width: 100%
</style>

 在swiperOption对象中使用loop: true可以使这个轮播插件循环轮播，使用atuoplay: true可以自动循环轮播

然后使用列表循环方法简化代码

<template>
  <div class="wrapper">
    <swiper :options="swiperOption">
      <swiper-slide v-for="item of swiperList" :key="item.id">
        <img :src="item.imgUrl" alt="图片" 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://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20191/37a42ce34dc16cd43bad17570bf6ab31.jpg_750x200_65d24bd7.jpg'
      }, {
        id: '0002',
        'imgUrl': 'http://img1.qunarzz.com/piao/fusion/1811/31/da037478f37cf202.jpg_750x200_fe28d396.jpg'
      }]
    }
  }
}
</script>

<style lang="stylus" scoped>
  .wrapper >>> .swiper-pagination-bullet-active
    background-color: #fff
  .wrapper
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 26.67% //高度相对于宽度会自动撑开26.67%
    background-color: #eee //图片加载完成前使背景显示浅灰色
    .swiper-img
      width: 100%
</style>

最终效果图显示 

将所有代码传至码云的index-swiper分支上

最后，需要将这个分支合并到master分支上

git checkout master            //先切换到master分支上
git merge origin/index-swiper  //将index-swiper分支合并到现在的分支上，即master分支
git push                       //把master分支上的内容也提交到线上