vue-awesome-swiper快速使用

1.下载

 npm i  vue-awesome-swiper --save

2. 在需要的组件中引用样式文件和插件封装的组件

import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";

components: {
    swiper,
    swiperSlide
  },

3. 使用插件自带的组件

<!-- options swiper的配置参数 -->
    <swiper :options="swiperOption" ref="swiperOption" id="swiper" >
    <!-- swiper内容区域 -->
      <swiper-slide v-for="(item,inds) in swiperlist" :key="inds">
           <img :src="item.image" :title="item.title" alt="" />
      </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>

4. 在script中添加swiper配置

如果需要更多配置,官网配置地址

export default {
  name: "swiper_home",
  props:["swiperlist"],
  data() {
    return {
      // swiper的配置
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 2000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        // 分页配置
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //允许分页点击跳转
          paginationHide:true
        },
        // 上下页配置
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      }
    }
  }
};

遇到的小坑

-loop不生效

加入下面属性可以解决
observer:true,//修改swiper自己或子元素时，自动初始化swiper 
observeParents:true,//修改swiper的父元素时，自动初始化swiper 
并在swiper组件上加入判断 v-if="swiperlist.length>0"