Vue高仿去哪儿网--【二：轮播图的实现,新版填坑】

一、引入swiper实现轮播图效果，最新遇到的跟新后的版本，遇到vue-awesome-swiper组件pagination小圆点不显示问题

1、关于vue-awesome-swiper

GitHub地址：https://github.com/surmon-china/vue-awesome-swiper

官网介绍：https://surmon-china.github.io/vue-awesome-swiper/

2、用npm安装vue-awesome-swiper

①在命令行安装依赖

$ npm install vue-awesome-swiper --save

② 然后我们去package.json中看看是否存在

③怎么用？

（1）GitHub上提供了多种使用方式，我们要在vue项目中要用到的主要是选①全部引入还是②组件中引入，这里我们选第一种种：【在main.js中按照下图形式引入】

3.注意：为了防止在网速很慢的时候，出现屏幕抖动，因为图标的缓慢加载，所以需要在swiper外面加一个div 包裹，给这个div 设置,padding-bottom的值是根据图片的宽高比设定的

样式穿透>>> 

在别处看到自己的问题：

配置

template：

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

script：

export default {
    data() {
      return {
        swiperOption: {
          // 所有的参数同 swiper 官方 api 参数一样
          // 
        }
      }
    },
    ...
  }

重点在于 swiperOption 里面的变化，区别看下图：

原来 pagination 和 autoplay 要这样配置！
我原来就是在这两处错了，导致 pagination 不显示，图片不轮播。

出错前：

纠正后：

后续未完，