(2)輪播圖

1.下載並使用依賴包 swiper vue-awesome-swiper.與swiper@5以快速簡潔的建立元件

2.引入swiper.css 與 swiper檔案

（npm i vue-awesome-swiper swiper）

（npm i swiper@5）

3．通過swiper.css與less檔案快速建立元件css樣式

4.通過Swiper物件函式繫結操縱物件並對物件下元素進行輪播

具體實現方法 : 1.

<div id="swipercom">
    <div class="swiper-container" id="swiperIndex">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, i) in imgs" :key="i">
          <img :src="item.pic" alt="" />
        </div>
      </div>
      <!-- 如果需要分頁器 -->
      <div class="swiper-pagination"></div>
    </div>
  </div>

5.設定分頁器

  pagination: {
        el: ".swiper-pagination", //分頁器與哪個標籤關聯
        clickable: true, //分頁器是否可以被點選
      },

其中loop為迴圈模式autoplay為是否自動切換speed為切換所需時間單位為毫秒

通過pagination物件繫結物件並進行點選設定

el為繫結元素，clickable為是否允許點選

6．資料替換

將頁面中的初始資料替換為從後端獲取的資料實現方法:

使用axios，首先安裝axios和swiper

然後在src的資料夾下建立一個名為api的資料夾，在其內部建立index.js

引入axios

import axios from 'axios'

引入埠號

let baseUrl = 'http://localhost:3000';

建立函式。獲取資源

export function getBanner(type=0){
    return axios.get(`${baseUrl}/banner?type=${type}`)
}

type:資源型別,對應以下型別,預設為 0 即 PC

0: pc

1: android

2: iphone

3: ipad

引入自定義函式和生命週期函式

  async mounted() {
    //呼叫請求輪播圖圖片的函式，拿到輪播圖資料
 

    let res = await getBanner(1);
    this.imgs = res.data.banners.slice(0, 3);
    var mySwiper = new Swiper("#swiperIndex", {
      //配置分頁器內容
      pagination: {
        el: ".swiper-pagination", //分頁器與哪個標籤關聯
        clickable: true, //分頁器是否可以被點選
      },
    });
  },

把資料存下來

  data() {
    return {
      imgs: [
        { },
        { },
        { },
      ],
    };
  },

在前端頁面顯示

    <div class="swiper-slide" v-for="(item, i) in imgs" :key="i">
          <img :src="item.pic" alt="" />
        </div>