vue移动端项目使用Swiper那些坑----paginationType&observeParents

项目场景：

我在移动端使用了swiper插件来做轮播图效果，如下图：

问题一：
ui设计稿上的分页器是分式形式的，但是swiper默认的分页器是一个圆点，
我需要修改这个样式，如下图：

---

问题描述：

我按照官方文档上所说，分页器样式类型，可选

‘bullets’ 圆点（默认）
‘fraction’ 分式
‘progress’ 进度条
‘custom’ 自定义
写下了这段代码

data () {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination',
          paginationType: 'fraction'
        }
      }
    }
  }

然并卵，看看现在长什么样子

---

原因分析：

我很懵逼，令款头大。
这是官方文档让我这么写的啊，怎么回事？啊啊啊啊啊~~~~~~
是版本问题吗，我按照下面的操作，看了看自己的版本，擦好看一下自己的package.json文件，发现自己的swiper版本是 ^5+，如图

那接下来去官方文档上再去看看吧

进下图，不要问我为什么是Swiper6了，我也不知道，进来就这样了，😭😭，点开看看，和Swiper3给的写法一样

---

解决方案：

不抛弃，不放弃，问题总要解决的，怎么办，一个意外的惊喜，我发现，可以了
把原来的代码paginationType: 'fraction’改成type: 'fraction’就可以了

data () {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction'
        }
      }
    }
  }

---

此时的子组件代码如下

<template>
  <div class="container">
    <div class="wrapper">
      <swiper ref="mySwiper"  :options="swiperOptions">
        <swiper-slide>
            <img class="gallary-img" src="http://img1.qunarzz.com/sight/p0/1501/89/babe532d89b23ac070bc09dd092dc9b0.water.jpg_350x240_771a725e.jpg">
        </swiper-slide>
        <swiper-slide>
            <img class="gallary-img" src="http://img1.qunarzz.com/sight/p0/1905/79/7907118d1ae61082a3.img.jpg_350x240_faec9334.jpg">
        </swiper-slide>
        <swiper-slide>
            <img class="gallary-img" src="http://img1.qunarzz.com/sight/p0/1905/79/7907118d1ae61082a3.img.jpg_350x240_faec9334.jpg">
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
  </div>
</template>
<script>
export default {
  name: 'CommonGallary',
  data () {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction'
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
// 这行代码很重要，如果不写，分页器会因为溢出被隐藏掉
// /deep/的写法是less里的样式穿透
.container /deep/ .swiper-container{
  overflow: inherit;
}
  .container{
    z-index: 99;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
    .wrapper{
      width: 100%;
      height: 0;
      padding-bottom: 100%;
      .gallary-img{
          width: 100%;
      }
      .swiper-pagination{
        color: #fff;
        bottom: -1.1rem;
      }
    }
  }
</style>

---

但是到这里就结束了吗，怎么会呢，作为一名合格的程序员，工作三连来一波

组件写好了，得让他挂载到父组件上正常显示吧
我想的逻辑是这样的

1. 在父组件的data中定义一个布尔变量GallaryShow用来控制子组件的显示与隐藏，默认为false
2. 给父组件的banner绑定点击事件，点击之后修改GallaryShow为true，令子组件显示
3. 给子组件的外层div绑定点击事件，点击之后修改GallaryShow为false，令子组件隐藏

但是我写完了整个逻辑之后，出现了下面这种效果

这个问题主要是，因为点击事件带来的显示与隐藏，造成了Swiper渲染时对宽度进行了重新计算，想解决这个问题，需要配置swiper的监视器里的两个属性observeParents和observe，更多Observe(监视器)的解释，请点击监视器浏览官方文档

  data () {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction'
        },
        observer: true,
        observeParents: true
      }
    }
  },

---

终极代码奉上，款哥收工回家：

父组件

<template>
  <div>
    <!-- 点击banner图部分，显示画廊组件 -->
    <div class="banner" @click="handleBannerClick">
      <img class="banner-img" src="http://img1.qunarzz.com/sight/p0/1501/89/babe532d89b23ac070bc09dd092dc9b0.water.jpg_350x240_771a725e.jpg">
      <div class="banner-info">
        <div class="banner-title">九寨沟(AAAA景区)</div>
        <div class="banner-num">
          <span class="iconfont banner-icon">&#xe608;</span>
          <span>&nbsp;3</span>
        </div>
      </div>
    </div>
    <common-gallary
    v-show="showGallary"
    @close="handleGallaryClose">
    </common-gallary>
  </div>
</template>
<script>
import CommonGallary from 'common/gallary/Gallary.vue'
export default {
  name: 'DetailBanner',
  data () {
    return {
      // 一个控制画廊组件显示与隐藏的布尔值
      showGallary: false
    }
  },
  methods: {
    handleBannerClick () {
      this.showGallary = true
    },
    handleGallaryClose () {
      this.showGallary = false
    }
  },
  components: { CommonGallary }
}
</script>
<style lang="less" scoped>
.banner{
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 55%;
  .banner-img{
    width: 100%;
  }
  .banner-info{
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    line-height: .6rem;
    color: #fff;
    background-image: linear-gradient(top,rgba(0,0,0,0) , rgba(0,0,0,.8));
    .banner-title{
      flex: 1;
      font-size: .32rem;
      padding: 0 .2rem;
    }
    .banner-num{
      height: .32rem;
      line-height: .32rem;
      margin-top: .14rem;
      padding: 0 .4rem;
      font-size: .24rem;
      border-radius: .2rem;
      background: rgba(0,0,0,.8);
      .banner-icon{
        font-size: .24rem;
      }
    }
  }
}
</style>

---

子组件

<template>
  <div class="container" @click="handleGallaryClick">
    <div class="wrapper">
      <swiper ref="mySwiper" :options="swiperOptions">
         <swiper-slide>
            <img class="gallary-img" src="http://img1.qunarzz.com/sight/p0/1501/89/babe532d89b23ac070bc09dd092dc9b0.water.jpg_350x240_771a725e.jpg">
        </swiper-slide>
        <swiper-slide>
            <img class="gallary-img" src="http://img1.qunarzz.com/sight/p0/1909/14/1491da45b83cc72da3.img.jpg_350x240_58a1303e.jpg">
        </swiper-slide>
        <swiper-slide>
            <img class="gallary-img" src="http://img1.qunarzz.com/sight/p0/1501/8e/8e1a74cc8973a20a.water.jpg_350x240_a89d2724.jpg">
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>
<script>
export default {
  name: 'CommonGallary',
  props: {
    imgs: Array,
    default () {
      return []
    }
  },
  data () {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction'
        },
        observer: true,
        observeParents: true
      }
    }
  },
  methods: {
    handleGallaryClick () {
      this.$emit('close')
    }
  }
}

</script>
<style lang="less" scoped>
.container /deep/ .swiper-container{
  overflow: inherit;
}
  .container{
    z-index: 99;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
    .wrapper{
      width: 100%;
      height: 0;
      padding-bottom: 100%;
      .gallary-img{
          width: 100%;
      }
      .swiper-pagination{
        color: #fff;
        bottom: -1rem;
      }
    }
  }
</style>