7-3 首页轮播图

借助第三方的轮播插件，npm install [email protected] --save

在全局使用vue-awesome-swiper插件：

src目录下的main.js引入以下四个：

在具体小组件中使用，要复制以下代码（他们的功能分别是）：

显示轮播图下面的点点、显示上页按钮、显示下页按钮、显示下划线

接下来，在Home下的components下创建一个Swiper.vue来做轮播图

让它做循环输出：

对swiper-slide用v-for做循环，遍历list做一个循环，循环的每一项都显示一个图片，图片的地址即src绑定（用：绑定）的地址

做列表项循环时，都希望循环的项有个key值

<swiper-slide v-for="item of list" :key="item.id">
        <img class="swiper-img" :src="item.imgUrl" />
</swiper-slide>

 swiper.vue如下：

<template>
  <div class="wrapper">  //最外层加一个div标签，当网速慢时，图片没缓冲过来，外部div会把图片撑起来，下面的字体不会上移
    <swiper :options="swiperOption" v-if="showSwiper">  //绑定了一个变量swiperOption,所以要在这个组件的data中定义这个数据
      <swiper-slide v-for="item of list" :key="item.id">
        <img class="swiper-img" :src="item.imgUrl" />
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeSwiper',
  props: {
    list: Array
  },
  data () {   //当在子组件中定义data时，data一定是一个函数
    return {  //返回一组数据
      swiperOption: {   //定义swiperOption
        pagination: '.swiper-pagination',  //配置项，传显示分页的div名称，左右滑动时下面就会有点
        loop: true   //让轮播插件支持循环轮播
      }
    }
  },
  computed: {
    showSwiper () {
      return this.list.length
    }
  }
}
</script>

<style lang="stylus" scoped>
  .wrapper >>> .swiper-pagination-bullet-active   //改轮播图下面点的颜色为白色
    background: #fff
  .wrapper    //给轮播图加的div标签，实现图片的宽高比（以下四个缺一不可）
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 31.25%    //宽高比，意思是高度会随着宽度自动的撑开31.25%
    background: #eee          //图片没出来时，显示这个背景
    .swiper-img     //给轮播图图片设置宽度，与屏幕宽度一致
      width: 100%
</style>