一个页面两个或多个swiper vue中一个页面多个swiper互相干扰 swiper轮播冲突

在vue中如何处理同一个页面中有多个swiper，首先我们需要分2中情况：

1、如果在vue中采用 Vue-Awesome-Swiper，如果采用这种方式的话，可以给每个swiper组件添加一个class,来区分，分别建立不同的swiperOption、swiperSlides，具体代码如下：

//swiper组件1
<swiper :options="swiperOptionSwp1"><swiper-slide v-for="(slide, index) in swiperSlidesSwp1" :key="index">I'm Slide {{ slide }}</swiper-slide><div class="swiper-button-prev swp1"></div><div class="swiper-button-next swp1"></div></swiper> //swiper组件2<swiper :options="swiperOptionSwp2"><swiper-slide v-for="(slide, index) in swiperSlidesSwp2" :key="index">I'm Slide {{ slide }}</swiper-slide><div class="swiper-button-prev swp2"></div><div class="swiper-button-next swp2"></div></swiper> //js部分//swiper组件1的配置swiperOptionSwp1：{navigation: {nextEl: '.swiper-button-next.swp1',prevEl: '.swiper-button-prev.swp1',},loop:false},//swiper组件2的配置swiperOptionSwp2: {navigation: {nextEl: '.swiper-button-next.swp2',prevEl: '.swiper-button-prev.swp2',},loop:false},

2、如果使用的是通用方法建立的swiper,具体如下：

var mySwiper = new Swiper ('.swiper-container', {direction: 'vertical', // 垂直切换选项loop: true, // 循环模式选项pagination: {el: '.swiper-pagination',},navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},})

如果你们是选用的上面这种写法，也可以采用给不同的swiper 添加不同的class区分，代码如下：

<div class="swiper-container swiper1"><div class="swiper-wrapper"><div class="swiper-slide">Slide 1</div><div class="swiper-slide">Slide 2</div><div class="swiper-slide">Slide 3</div></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div>
</div>
<div class="swiper-container swiper2"><div class="swiper-wrapper"><div class="swiper-slide">Slide 1</div><div class="swiper-slide">Slide 2</div><div class="swiper-slide">Slide 3</div></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div>
</div>//js代码
var mySwiper = new Swiper ('.swiper1', {direction: 'vertical', // 垂直切换选项loop: true, // 循环模式选项pagination: {el: '.swiper-pagination.swiper1',},navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},})   var mySwiper = new Swiper ('.swiper2', {direction: 'vertical', // 垂直切换选项loop: true, // 循环模式选项pagination: {el: '.swiper-pagination.swiper2',},navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},})

 如有疑问，欢迎交流哟O(∩_∩)O~

一个页面两个或多个swiper vue中一个页面多个swiper互相干扰 swiper轮播冲突相关推荐

vue中进入页面，自动触发一次点击事件
vue中进入页面,自动触发一次点击事件 html script 一进去页面,我肯定是要进去就能看到数据,而不是需要点击选项1才得到数据,解决办法就是直接在created()中调用 html <d ...
FullCalendar拖拽日历在vue中单个页面的使用方法
FullCalendar拖拽日历在vue中单个页面的使用方法 1.首先通过npm下载插 npm install --save @fullcalendar/vue @fullcalendar/daygr ...
vue中同一页面多个video播放问题
项目中同一页面中同时存在两个视频,播放A视频时,又播放B视频,声音会叠加,因此,需要在播放一视频时,将另一视频停掉. 此处视频路径是分开存储,因此在播放对应视频时传入对应的参数,调用该方法时使用v- ...
vue 加载页面时触发时间_详解Vue.js在页面加载时执行某个方法
详解Vue.js在页面加载时执行某个方法 jQuery中可以这样写 vue中,如果要达到相同效果,可以使用vue的生命周期函数,如create或者mounted 附上vue.js的生命周期函数执行流程 ...
vue中局部页面跳转_vue使用感受（二）组件间跳转
想要看代码高亮的可以去我的微信公众号(pearapple_2015)查看. 昨天我们聊了一下vue的组件间传值,今天来讨论下我遇到的第二个问题组件间跳转.在不使用前端框架的时候,如果我们要点击菜单跳转 ...
微信小程序 swiper和weiper-itme组件的基本使用，微信小程序轮播图这么做教程
1.swiper组件是干嘛的? 滑块视图容器.其中只可放置swiper-item组件,否则会导致未定义的行为. 2.swiper和swiper-itme怎么使用? 接下来我尝试教大家怎么使用swipe ...
在vue中二级页面返回一级页面
场景:在vue后台管理端项目,需要实现从列表页面跳到详情页面,再从详情页面返回到列表时,列表页面保持跳转之前的状态. 方案一:keep-alive 实践证明,效果是实现了,但是带来了其他问题,会将其他 ...
vue两个按钮切换_在vue中实现多个按钮样式的点击切换？
1.在vue中实现多个按钮样式的点击切换?有多个按钮,点击其中一个出现下划线,而另一个回到原始状态. 点击其中一个两个同时出现下划线样式: 再次点击两个都还原成最初的样式,即有下划线: 如何实现只有被 ...
vue中，页面使用＜keep-alive＞缓存，页面切换不调用beforeDestroy和destroyed
不设置keep-alive,离开当前路由时,会调用beforeDestroy和destroyed来销毁. 当设置keep-alive之后,不会直接调用这组销毁生命周期函数,而是在生命周期函数中新增两个 ...

一个页面两个或多个swiper vue中一个页面多个swiper互相干扰 swiper轮播冲突

在vue中如何处理同一个页面中有多个swiper，首先我们需要分2中情况：

1、如果在vue中采用 Vue-Awesome-Swiper，如果采用这种方式的话，可以给每个swiper组件添加一个class,来区分，分别建立不同的swiperOption、swiperSlides，具体代码如下：

2、如果使用的是通用方法建立的swiper,具体如下：

如果你们是选用的上面这种写法，也可以采用给不同的swiper 添加不同的class区分，代码如下：

一个页面两个或多个swiper vue中一个页面多个swiper互相干扰 swiper轮播冲突相关推荐

最新文章

热门文章