vue-awesome-swiper滑动失效的问题解决方案

最近在做项目的时候遇到这样一个问题，就是在vue项目的不同页面使用了swiper插件后，导致其他界面的swiper插件失效，最终摸索了一天终于解决了。

我遇到的情况是这样的，在界面A中，使用这种定义变量式的方式来初始化swiper.

var mswiper = new Swiper('.swiper-container', {effect : 'coverflow',slidesPerView: 1.6,centeredSlides: true,slideShadows:false,coverflowEffect: {rotate: 0,stretch: -40,depth: 200,modifier: 2,slideShadows : true}});

而在界面B中，使用的是标签话的方法引用。

<swiper :options="swiperOption" ref="mySwiper"><swiper-slide v-for="(item,index) in BannerList" :key="item.bannerid"><img :src="item.imgurl" alt="" class="banner_img"></swiper-slide></swiper>

vue界面加载的时候，你会发现这两块内容虽然不属于同一个界面，但是所有的内容都会被顺序解析到同一个界面中，从chrome浏览器的开发者模式可以发现，界面A和界面B最终解析出来的Dom树结构是一样的。

所以当界面A先解析时，由于通过class=swiper-container会同时识别到A和B两个界面的元素，所以通过第一种定义变量的方式会同时作用于B界面的滑动控件。那么我们肯定不想这两个滑动控件彼此有干扰，怎么解决。

解决办法很简单，就是在使用变量定义的地方，在swiper-container那个标签上重新添加一个class,通过新添加的class来识别，这样就可以避免最大程度的干扰，两个滑动插件终于都可以正常工作啦。

  <div class="swiper-container" style="margin-top: 50px"><div class="swiper-wrapper"><div class="swiper-slide" v-for="(scene, index) in sceneData">...</div></div>

改为：

 <div class="swiper-container swiper-container_index" style="margin-top: 50px"><div class="swiper-wrapper"><div class="swiper-slide" v-for="(scene, index) in sceneData">...</div></div>

定义的时候，定义语句从

var mswiper = new Swiper('.swiper-container', {...});

改为

var mswiper = new Swiper('.swiper-container_index', {...});

问题圆满解决。

vue-awesome-swiper滑动失效的问题解决方案相关推荐

keep-alive失效原因及解决方案
keep-alive失效原因及解决方案问题描述失效原因解决方案问题描述 keep-alive结合路由使用,需要缓存的组件,在路由配置中的meta中添加keep-alive属性侧边栏二级菜单列 ...
Vue开发中遇到的问题及解决方案
Vue开发中遇到的问题及解决方案参考文章: (1)Vue开发中遇到的问题及解决方案 (2)https://www.cnblogs.com/lvruifang/p/8610688.html (3)ht ...
html中间大两边小轮播代码,vue使用swiper实现中间大两边小的轮播图效果
项目中使用的vue,刚好有需求要实现轮播图,突出显示当前图片,两边展示其他图片:通过查各种资料,实现了,故在此记录下来下面我们来看下实现步骤: 第一步:首先在项目index.html中引入swipe ...
vue 项目中遇到的问题及解决方案
vue 项目中遇到的问题及解决方案参考文章: (1)vue 项目中遇到的问题及解决方案 (2)https://www.cnblogs.com/jackie-song/p/11950835.html ...
关于缓存穿透，缓存击穿，缓存雪崩，热点数据失效问题的解决方案
关于缓存穿透,缓存击穿,缓存雪崩,热点数据失效问题的解决方案参考文章: (1)关于缓存穿透,缓存击穿,缓存雪崩,热点数据失效问题的解决方案 (2)https://www.cnblogs.com/To ...
vue本地静态图片的路径问题解决方案
vue本地静态图片的路径问题解决方案参考文章: (1)vue本地静态图片的路径问题解决方案 (2)https://www.cnblogs.com/ranyonsue/p/11608760.html ...
Vue使用Swiper看这一篇就够了
Vue使用Swiper看这一篇就够了此案例实现需求完成swiper动态异步数据下的slide渲染自定义分页器样式解决loop:true设置时的事件丢失问题 swiper鼠标移入/移出暂停/开 ...
Vue实现图片滑动验证
Vue实现图片滑动验证使用vue完成使用vue完成实习一个星期小白对工作安排的图片滑动验证分享 1.安装依赖附上:https://www.npmjs.com/package/vue-monop ...
【VUE】vue实现登录滑动拼图验证的两种方法，纯前端组件验证以及前后端同时验证
vue实现登录滑动拼图验证的两种方法: 第一种是纯前端组件验证,只能区分是人为操作还是机器操作. 第二种是前后端同时验证,这种方法加上后端校验相对会更安全一些.(注:在最底部加上了同时兼容移动端的方法 ...
Web前端_配合swiper滑动插件实现同比例双指缩放图片
参考过的一篇文章:https://blog.csdn.net/gl0ry/article/details/56055414 html实例代码: 缩放的图片需要放在class 为list 的div里面 ...

vue-awesome-swiper滑动失效的问题解决方案

vue-awesome-swiper滑动失效的问题解决方案相关推荐

最新文章

热门文章