添加首页轮播图

Author: Zebzhong

package.json

@@ -18,6 +18,7 @@
     "postcss-viewport-units": "^0.1.4",
     "postcss-write-svg": "^3.0.1",
     "vue": "^2.5.2",
+    "vue-awesome-swiper": "^3.1.3",
     "vue-router": "^3.0.1",
     "vuejs-datepicker": "^0.9.29"
   },

src/App.vue

@@ -12,7 +12,6 @@ export default {
 }
 </script>
 <style lang="scss">
-@import './style/reset';
 .router-fade-enter-active, .router-fade-leave-active {
   transition: opacity .3s;
 }

src/main.js

@@ -3,6 +3,7 @@
 import Vue from 'vue'
 import App from './App'
 import router from './router'
+import './style/reset.scss'
 
 Vue.config.productionTip = false
 

src/page/home/Home.vue

@@ -5,7 +5,16 @@
       <a class="msg-btn"></a>
     </header>
     <div class="container">
-      <section class="slider"></section>
+      <section class="slider">
+        <swiper :options="swiperOption" ref="mySwiper" class="myswiper">
+          <!-- slides -->
+          <swiper-slide v-for="(item,index) in swiperList" :key="index">
+            <img :src="item.imgUrl" alt="" class="swiper-img">
+          </swiper-slide>
+          <!-- Optional controls -->
+          <div class="swiper-pagination"  slot="pagination"></div>
+        </swiper>
+      </section>
       <nav class="lesson-list">
         <router-link class="lesson-item" :to="{path: '/lesson', query: {lessonName: item.lessonName, id: item.id}}" v-for="(item,index) in lessonNav" :key="index">
           <img class="lesson-item-icon" :src="item.imgUrl" alt="">
@@ -20,11 +29,25 @@
 <script>
 import tabBox from '@/components/TabBox'
 import footBottom from '@/components/Footer'
+import 'swiper/dist/css/swiper.css'
+import '../../style/swiper.scss'
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
+
 export default {
   name: 'webHome',
   data () {
     return {
-      msg: 'init',
+      swiperList: [
+        {
+          imgUrl: require('../../assets/images/series_1.png')
+        },
+        {
+          imgUrl: require('../../assets/images/series_2.png')
+        },
+        {
+          imgUrl: require('../../assets/images/series_1.png')
+        }
+      ],
       lessonNav: [
         {
           lessonName: '语文',
@@ -122,12 +145,33 @@ export default {
           view: '1265',
           price: 53.6
         }
-      ]
+      ],
+      swiperOption: {
+        pagination: {
+          el: '.swiper-pagination',
+          clickable: true,
+          bulletClass: 'slide-bullet',
+          bulletActiveClass: 'slide-bullet-active'
+        },
+        autoplay: true,
+        loop: true
+      }
     }
   },
   components: {
     tabBox,
-    footBottom
+    footBottom,
+    swiper,
+    swiperSlide
+  },
+  computed: {
+    swiper () {
+      return this.$refs.mySwiper.swiper
+    }
+  },
+  mounted () {
+  },
+  methods: {
   }
 }
 </script>
@@ -171,10 +215,6 @@ export default {
     background-size: cover;
   }
 }
-.slider{
-  height:268px;
-  background-color:#d2d2d2;
-}
 .lesson-list{
   padding:8px 10px;
   display: flex;

src/style/swiper.scss

@@ -0,0 +1,34 @@
+@import './variable.scss';
+.slider{
+  height:268px;
+  background-color:#d2d2d2;
+  @at-root .myswiper{
+    height: 100%;
+    @at-root .swiper-img{
+      width:100%;
+      height:100%;
+    }
+    @at-root .slide-bullet {
+      display: block;
+      float:left;
+      margin-left:11px;
+      width:15px;
+      height:15px;
+      border:3px solid $green;
+      border-radius: 50%;
+    }
+    @at-root .slide-bullet-active{
+      background-color: $green;
+    }
+  }
+}
+
+.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{
+  position: absolute;
+  left: initial;
+  right:33px;
+  bottom:15px;
+  width:80px;
+  height:15px;
+  overflow: hidden;
+}