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'
            }
        }
      }
  },

转载于:https://www.jianshu.com/p/8cd4b3fede2f

本文链接：https://blog.csdn.net/weixin_34399060/article/details/91097327

智能推荐

同一页面多个swiper出现错乱问题

第一次使用swiper出现的各种奇葩问题，搞得头疼 1.同一页面存在多个swiper时，不能以通用的id或者class为定位标准，容易出现同时找到多个对象的问题，需要确保id和class的唯一性 ...

同一页面的两个Iframe获取数据

首先页面：此时左侧的IFrame想要获取到右侧的Iframe中的数据： window.parent为父窗口。注意使用 contentWindow 和 contentDocument 属性。此时 right 就可以看做是右侧Iframe的 document对象了。即：通过right对象来获取右侧iframe的数据。如：...

分别获取在同一页面下两个动态生成的table的单选框值和textarea 文本框值

...

Vue路由跳转同一页面时,页面不刷新的问题

Vue路由跳转同一页面时,页面不刷新的问题网上找了好多案例都达不到想要的效果,最终找到了这个,一行搞定,可以试试只需要在router-view中加入 :key="$route.fullPath"即可. 大概意思:通过绑定一个fullPath，可以识别当前页面路由的完整地址，当地址发生改变(包括参数改变)则重新渲染页面...

vue 同一页面路由参数改变刷新当前页面

vue 同一页面路由参数改变刷新当前页面 1.场景 2.实现 1.场景当你路由传参进入一个页面，例如商品详情页，goodDetail?id=1,但是你还是在当前页面业务需要交id改为2时，你会发现页面没有主动进行刷新重新加载。 2.实现可以的了应该...

代码先锋网代码片段及技术文章聚合