vue项目中使用swiper插件

先说说在vue中如何引用swiper

1.npm命令安装swiper

npm install swiper --save-dev

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

<script>
import Swiper from "swiper";
</script>

<style lang="scss" scoped>
@import "../../node_modules/swiper/css/swiper.min.css";
.banner1{
  width: 100%;
  height: 200px;
  img{
    width: 100%;
    height: 100%;
  }
}
</style>

3.初始化swiper

mounted() {
    var mySwiper = new Swiper(".banner1", {
      loop: true, // 循环模式选项
      autoplay:true, // 自动播放 3秒
      observer:true,
      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination"
      }
    });
  },

问题

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

数据都不出来，而且无法进行左右滑动

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

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

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

解决办法：添加observeParents属性

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

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

 <div class="swiper-container banner1" 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布局。