手机轮播

components/mobile/Home.vue

@@ -2,6 +2,17 @@
   <div>
     <div class="home" v-if="!showMainSearch">
       <div class="header">
+        <div v-swiper:mySwiper="swiperOption">
+          <div class="swiper-wrapper">
+            <div class="swiper-slide">
+              <img class="home-bg" src="/images/mobile/@2x/applyPurchase/home/app-banner_01.jpg" alt="">
+            </div>
+            <div class="swiper-slide">
+              <img class="home-bg" src="/images/mobile/@2x/applyPurchase/home/app-banner_02.jpg" alt="">
+            </div>
+          </div>
+          <div class="swiper-pagination swiper-pagination-bullets"></div>
+        </div>
         <div class="search-content">
           <input type="text" placeholder="请输入您要查找的型号或品牌" @click="onHomeSearchClick()">
           <span>
@@ -60,7 +71,21 @@
     data () {
       return {
         showStoreInfo: false,
-        showMainSearch: false
+        showMainSearch: false,
+        swiperOption: {
+          autoplay: 3000,
+          initialSlide: 0,
+          pagination: '.swiper-pagination',
+          // 解决点击分页器后图片就不能轮播的问题
+          autoplayDisableOnInteraction: false,
+          paginationClickable: true,
+          mousewheelControl: false,
+          effect: 'fade',
+          lazyLoading: true,
+          loop: true,
+          prevButton: '.swiper-button-prev',
+          nextButton: '.swiper-button-next'
+        }
       }
     },
     components: {
@@ -83,13 +108,36 @@
     }
   }
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
   .home {
     padding-bottom: 1rem;
     .header {
-      background: url('/images/mobile/@2x/applyPurchase/home/home-bg.png') no-repeat;
-      background-size: cover;
       height: 3.26rem;
+      position: relative;
+      .home-bg {
+        height: 3.26rem;
+        width: 100%;
+      }
+      .search-content {
+        position: absolute;
+        top: 0;
+        width: 100%;
+      }
+      .swiper-container {
+        height: 3.26rem;
+        position: absolute;
+        top: 0;
+        width: 100%;
+        z-index: 0;
+      }
+      .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
+        bottom: .2rem !important;
+      }
+      .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
+        width: .36rem !important;
+        height: .36rem !important;
+        margin: 0 .5rem;
+      }
     }
     .link-list {
       background: #f3f3f7;