vue项目中使用swiper插件遇到的坑

先说说在vue中如何引用swiper

1.npm命令安装swiper

npm install swiper --save-dev

2.在需要用到swiper插件的组件中引入swiper

   js中   import Swiper from "swiper"

   css中   @import "swiper/dist/css/swiper.css";

3.初始化swiper



如上步骤完成之后,swiper的大致配置已完成,下面来看看一般都会遇到的问题

项目需求如图所示:


 我是使用swiper实现如上图所示,实现的过程可能会遇到的问题如下所示

1.使用静态数据时,页面可以正常滑动,一旦使用动态数据,页面就无法滑动,数据显示也不正常

                理想:  每排放四个,且可以左右滑动



                现实:  数据都不出来,而且无法进行左右滑动


                解决办法:   就是添加一个observer属性


页面写法


2.使用v-if条件,让swiper动态显示的时候,swiper也会出现如下bug效果

需求:选择下拉框中的转运,才出现如右所示的swiper切选

结果我添加了if条件之后,swiper界面混乱,且无法进行切换

解决办法:添加observeParents属性


页面写法

3.swiper图默认是从右向左滚动的,怎么改成从左向右滚动

在调用swiper的div上加dir="rtl"就行了,例子见下面链接

 http://www.swiper.com.cn/demo/26-rtl.htmlSwiper demo

1,html的dir属性改变排列的方向,所有浏览器都支持。

2,两个属性,ltr从左到右,默认的,left to right的缩写。

3,rtl从右到左,right to left的缩写。

4,swiper支持100%rtl布局。



我们可以根据项目需求来设置箭头初始朝向问题了

4.IE浏览器不兼容swiper4.0版本

      当我们把项目运行在IE浏览器中,某些页面就跳转不了,一开始还以为是路由跳转的原因导致的,最后发现罪魁祸首就是swiper


    swiper4.0版本不支持IE浏览器,这时候换成swiper3.0.2版本就可以了,当然相应的api也要有所修改

 当然swiper可能还有其他坑,我暂时还没遇到,欢迎评论下方提示


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,628评论 1 45
  • vue去哪网跟学笔记 记录学习点滴 1. 初始化项目 1.1 手机显示配适 minimum-scale=1.0,m...
    noobakong阅读 2,280评论 0 16
  • 在做移动端网页的时候,用mint-ui做轮播图,总是出现卡顿,于是想用swiper插件,搜了一下方法在vue里用这...
    uwenyi阅读 6,193评论 4 2
  • 旁边的小精灵睡着了。我也好困,很想睡,又想找地方宣泄自己,无处安放的内心。 我和他吵架了,因为狗,也因为他,过少的...
    子曦兰墨阅读 170评论 0 0
  • 我站在高处默默回首来时的路,依稀可见刚起步时的平地,忽而拔高的山坡,需要攀爬才能翻越的巨石。 这世间本来没有,走的...
    李子心诚阅读 522评论 0 1