vue中同一页面使用两个swiper插件

直接使用两个swiper插件,pagination小圆点会出现各种问题,例如滑动跟随另一个轮播图.

解决方法如下:

1.在home.vue(需要用两个插件的页面)自定义属性isShow

//第一个轮播图
<swiper v-if="headCarou.length>0"  :isShow="head"></swiper>
//第二个轮播图
<swiper v-if="headCarou.length>0"  :isShow="foot"></swiper>

//实例化中声明变量
data() {
    return {
      head:true,
      foot:false
    };
},

2.在swiper.vue组件中接收参数isShow

//接收父组件参数
  props: ["carouselArr","isShow"]

3.swiper组件中的swiper标签设置自定义属性:option,并根据isShow做三元判断

  <div class="swiperBox">
//如果是true,值为swiperOptions,否则为swiperOption
      <swiper :options="isShow?swiperOptions:swiperOption">
        <swiper-slide>
        </swiper-slide>
      </swiper>
  </div>

4.分别实例化两个swiper

data(){
      return{
        carArr:[],
       //实例化轮播图,根据上面自定义属性option的值
        swiperOption:{
            // init:false,
            loop:true,
            pagination:{
                el:'.swiper-pagination'
            }
        },
      //实例化第二个轮播图
        swiperOptions:{
            loop:true,
            pagination:{
                el:'.swiper-pagination'
            }
        }
      }
  },