48.vue-awesome-swipe使用

1.安装：npm install vue-awesome-swiper --save

2.局部引入：

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

import { swiper, swiperSlide } from "vue-awesome-swiper";

components: {

  swiper,

  swiperSlide

},

3.使用：

<!-- 轮播图 -->

<div class="swiper">

<swiper :options="swiperOption" class="swiper-container">

<!-- slides -->

<swiper-slide class="swiper-item" v-for="item of swiperList" :key="item.id">

<img class="swiper-img" :src="item.imgUrl" />

</swiper-slide>

<!-- 显示小点-->

<div class="swiper-pagination" slot="pagination"></div>

</swiper>

</div>

<!-- 轮播图 -->

 

 

 

data() {

 return {

   swiperOption: {

       pagination: {

          el: ".swiper-pagination",

          clickable: true //点击小圆点

},

  notNextTick: true,

  loop: true, //循环

  speed: 1000,

  autoplay: true

  // grabCursor: true //小手掌抓取滑动

},

  //三张轮播，使用变量循环

  swiperList: [

    {

       id: "001",

       bg: "white",

       imgUrl:"https://trade-prod.oss-cn-beijing.aliyuncs.com/paas_shop_static/market_advertiseImage/1550974453867424.jpg"

},

{

      id: "002",

      bg: "red",

      imgUrl:

      "https://trade-prod.oss-cn-beijing.aliyuncs.com/paas_shop_static/market_advertiseImage/597831022050017280.jpg"

}

   ]

  };

}