swiper vue 上一页_vue项目中使用swiper插件遇到的坑

先说说在vue中如何引用swiper

1.npm命令安装swipernpm install swiper --save-dev

2.在需要用到swiper插件的组件中引入swiperjs中   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界面混乱，且无法进行切换

页面写法

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

在调用swiper的div上加dir="rtl"就行了，例子见下面链接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可能还有其他坑，我暂时还没遇到，欢迎评论下方提示