Vue2 使用 Swiper

安装

• npm install swiper@4 --save -dev
• npm install vue-awesome-swiper@3 --save-dev

在需要使用的组件

//js代码
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default { 
  components: {
    swiper,
    swiperSlide
  }, 
  data() {
    return {
      swiperOption: {
        loop: true,
        observer:true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents:true,//修改swiper的父元素时，自动初始化swiper
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true //允许分页点击跳转
        },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        } 
     }
};
</script>
// html代码
<swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide>I'm Slide 1</swiper-slide>
      <swiper-slide>I'm Slide 2</swiper-slide>
      <swiper-slide>I'm Slide 3</swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
</swiper>

当你swiper-slide中加入v-for时,loop:true 可能出现问题

• 这时需要在swiper中加入 v-if=“需要遍历数组的名字.length>0”

如果你设置了keep-alive缓存和vue-router跳转,当跳转回来时,swiper可能会不运行

• 这时需要在设置一个data中的数据, 例如 isKeep=false
• 在swiper中加上 与上结合 v-if=“需要遍历数组的名字.length>0 && isKeep”

//激活前
 activated() {
    this.isKeep=true;
  },
  //激活后
  deactivated() {
    this.isKeep=false;
  }