效果图：

 

本姐只展示关键代码哈

上代码：网站有完整代码，但是数据不是循环的。https://surmon-china.github.io/vue-awesome-swiper/

循环数据的代码在此：

<template>

<!-- swiper1 -->

<div class="top" style="height: 340px; width: 340px"> <swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop"> <swiper-slide class="slide-1" style="height: 340px; width: 340px" v-for="(item,index) in msg" :key="index" :style="item.icon"> <!-- <pic-zoom :url="" :scale="3"></pic-zoom> --> </swiper-slide> </swiper> </div> <!-- swiper2 Thumbs -->   <div class="swiper" style="height: 340px; width: 340px" > <swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs"> <swiper-slide class="slide-1" style="height: 88px; width: 88px" v-for="(item,index) in msg" :key="index" :style="item.icon"> </swiper-slide> <div class="swiper-button-next swiper-button-white" slot="button-next"></div> <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div> </swiper> </div> </template> <script> export default {   data() {        return {               msg: [ //图片1 { 'icon': { backgroundImage: "url(" + require("../static/imgs/6.jpg") + ")", backgroundSize: "cover", backgroundposition: "center", backgroundRepeat: "no-repeat", },}, //2 { 'icon': { backgroundImage: "url(" + require("../static/imgs/5.jpg") + ")", backgroundSize: "cover", // backgroundposition: "center", // backgroundRepeat: "no-repeat", },}, //3 { 'icon': { backgroundImage: "url(" + require("../static/imgs/4.jpg") + ")", backgroundSize: "cover", // backgroundposition: "center", // backgroundRepeat: "no-repeat", },}，] }}} </script> 即可，主要代码是 backgroundImage: "url(" + require("../static/imgs/4.jpg") + ")", 注意是本地图片的二话一定要使用require。 over