• main.js

全域性引入輪播圖的js 和 css檔案

<template>
 <div>
  <h1>輪播圖案例</h1>
  <div class="swiper-container">
   <div class="swiper-wrapper">
    <div class="swiper-slide" v-for="item in bannerList" :key="item.id">
     <img :src="'http://localhost:3000' + item.img" alt="" />
    </div>
   </div>
  </div>
 </div>
</template>
​
<script>
//引入核心庫
import Swiper from "swiper";
import axios from "axios";
export default {
 data() {
  return {
   bannerList: []
   };
  },
 mounted() {
  //元件一載入就調取介面
  axios({
   url: "/api/api/getbanner"
   }).then(res => {
   console.log(res, "響應");
   if (res.data.code == 200) {
    this.bannerList = res.data.list;
    //延遲載入，下一次再去載入dom
    console.log(this, "例項化");
     //this.$nextTick(callback)
    this.$nextTick(() => {
     //元件一載入就調取輪播圖
     let swiper = new Swiper(".swiper-container", {
      loop: true,
      autoplay: {
       delay: 2000
       }
      });
     });
    }
   });
  }
};
</script>
​
<style lang="">
.swiper-container {
 width: 100%;
 height: 100%;
}
​
.swiper-slide {
 text-align: center;
 font-size: 18px;
 background: #fff;
​
 /* Center slide text vertically */
 display: -webkit-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 -webkit-justify-content: center;
 justify-content: center;
 -webkit-box-align: center;
 -ms-flex-align: center;
 -webkit-align-items: center;
 align-items: center;
}
</style>
​