关于用swiper轮播配置，和轮播会产生白屏以及虚假页点击失效

1.swiper轮播配置:
结构

<swiper :options="swiperOptions">
   <swiper-slide>
   </swiper-slide>
<swiper>

参数配置：

swiperOptions: {
        effect: 'coverflow',  
        grabCursor: true,
        centeredSlides: false,
        loop: true,  // 是否可以循环滑动
        slidesPerView: 'auto',  
        watchSlidesProgress: true,
        initialSlide: 0,
        autoplay: {
          disableOnInteraction: false,  // 是否在手动触碰停止轮播后，false继续轮播
          delay: 1000, // 多久自动滑动一页
        },
        coverflowEffect: {
          rotate: 0,
          stretch: 0,
          depth: 10,
          modifier: 1,
          slideShadows: false,
        },
      },

2.轮播产生白屏
产生原因：因为swiper多出来的页面，是初始化没有数据的。
解决办法：静默刷新。

注意：所有通过请求获取的数据，都要同时(!)用同一个参数静默刷新。
(1)普通请求(不需要处理能直接用的数据)，就把所有请求回来的数据作为满足条件设置参数。比如：

data:{
   showSwiper:true
}
getData(){
      this.getDate();  //  请求
      this.getPeopleInfo();  // 请求
      if(this.month > 0 && this.max_num.length > 0){
          this.showSwiper = false;
          this.$nextTick(() => {
            this.showSwiper = true;
          });
      }
}

(2)复杂请求(请求回来的数据要经过处理)

getData(){
      this.getDate();  //  请求
      this.getPeopleInfo();  // 请求
      this.getLock(); // 请求
      if(this.month > 0 && this.max_num.length > 0&&this.lockTime ===3){
          this.showSwiper = false;
          this.$nextTick(() => {
            this.showSwiper = true;
          });
      }else if(this.month > 0 && this.max_num.length > 0&this.lockTime ===0){
        this.showSwiper = false;
          this.$nextTick(() => {
            this.showSwiper = true;
          });
      }
}

3.虚假页(与轮播相反方向滑的第一页和最后一页)点击失效
是因为swiper的无限轮播跟普通无限轮播一样，都是通过复制第一个和最后一个页面来会制造无限轮播。但swiper只复制页面没有复制点击事件，此时我们用vue写的点击事件在页面遇到复制页面，点击事件就会失效。
当只有一个点击事件时，可以用new swiper:{on:click:function(){}}来解决。但是当有两个点击事件时，可以通过下面方法解决
解决办法：
(1)在swiper标签绑定点击事件，并且传$event事件对象通过它的目标对象e.target获取dom节点；

           <swiper
            v-if="showSwiper"
            v-cloak
            ref="mySwiper"
            class="cards"
            :options="swiperOptions"
            @click="clickE($event)"
          >

(2)用把蒙版绝对定位z-index把需要的区域分为需要的块，然后通过判断点击的是不是这个蒙版类名去添加对应的点击事件。

  clickE(e) {
      e.stopPropagation();  // 阻止冒泡到父元素
      this.clickTime += 1;  // 因为点击事件从蒙版冒泡到swiper，所以用次数限制
      if (e.target.className === 'block1' && this.clickTime === 2) {
        this.gotoHome('a');
      } else if (e.target.className === 'block2' && this.clickTime === 2) {
        this.gotoHome('b');
      } else if (e.target.className === 'block3' && this.clickTime === 2) {
        this.gotoHome('c');
      }
      if (e.target.className === 'button1' && this.clickTime === 2) {
        this.getData(arr[0], 0);
      } else if (e.target.className === 'button2' && this.clickTime === 2) {
        this.getData(arr[1], 2);
      } else if (e.target.className === 'button3' && this.clickTime === 2) {
        this.getData(arr[2], 1);
      }
      document.addEventListener(WebviewEvents.WebWillAppear, this.clearData); // rn原生开发中跳转了外部页面(非路由跳转),回来时用这个方法拉取数据
    },