美文网首页
vue中同一页面使用两个swiper插件

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

作者: Gino_Li | 来源:发表于2019-04-20 16:01 被阅读0次

    直接使用两个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'
                }
            }
          }
      },
    

    相关文章

      网友评论

          本文标题:vue中同一页面使用两个swiper插件

          本文链接:https://www.haomeiwen.com/subject/bohlgqtx.html