Vue.js+Koa2移動電商實戰10

vue-awesome-swiper 詳講1

　　做爲一個Vuer，vue-awesome-swiper組件在開發中是常用的，因此我的覺的是有必要詳細瞭解一下它的用法的。他能夠做輪播圖，能夠做滾動。

　一個最簡單的輪播圖

　　咱們這裏做一個單獨的組件，這樣不會污染項目中的文件，這個只是一個最簡單默認的swiper，咱們在components目錄下新建一個文件夾swiper，而後新建一個swiperDefault.vue文件。寫入以下代碼:

<template>
  <div >
      <swiper>
        <swiper-slide class="swiper-slide" v-for="(item, index) in slide" :key="index">
           Slide {{item}} 
        </swiper-slide>
      </swiper>
  </div>
</template>
 
<script>
    import 'swiper/dist/css/swiper.css' 
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
        data() {
            return {
                slide: [1,2,3,4,5,6]
            }
        },
        components:{swiper,swiperSlide}
    }
</script>
 
<style scoped>
  .swiper-slide{
      height: 4rem;
      text-align: center;
      padding-top: 3rem;
      border-bottom: 1px solid #ccc;
  }
</style>

　　代碼寫好後，在shoppingMall.vue文件裏進行引入使用。

import swiperDefault from '../swiper/swiperDefault'

　　而後註冊組件,其實上節課的代碼也是能夠封裝成一個component的。

components:{swiper,swiperSlide,swiperDefault},

　　註冊好後，直接在template裏使用就能夠了.

<swiperDefault></swiperDefault>

　添加分頁器

　　做這類輪播圖效果，如今主流的都是添加上分頁器的，就是下方的小圓點，配置這些就須要在swiper標籤上使用options屬性來進行配置了。
　　咱們如今data裏進行配置，代碼以下：

swiperOption:{
    pagination:{
        el:'.swiper-pagination'
    }
}
 

　　而後在template標籤里加入一個div用於顯示分頁器,注意的是要在swiper-slide外層。

<div class="swiper-pagination" slot="pagination"></div>

　　最後是在swiper標籤里加入 :options="swiperOption"。就實現了有分頁期的效果。
　　總體代碼以下：

<template>
  <div >
      <swiper :options="swiperOption">
        <swiper-slide class="swiper-slide" v-for="(item, index) in slide" :key="index">
           Slide {{item}} 
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
  </div>
</template>
 
<script>
    import 'swiper/dist/css/swiper.css' 
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
        data() {
            return {
                slide: [1,2,3,4,5,6],
                swiperOption:{
                    pagination:{
                        el:'.swiper-pagination'
                    }
                }
            }
        },
        components:{swiper,swiperSlide}
    }
</script>
 
<style scoped>
  .swiper-slide{
      height: 4rem;
      text-align: center;
      padding-top: 3rem;
      border-bottom: 1px solid #ccc;
  }
</style>

　豎屏切換效果

　　在配置項裏直接配置direction就能夠了，配置豎屏代碼以下。

swiperOption:{
    direction:'vertical',
    pagination:{
        el:'.swiper-pagination'
    }
}

　　總體代碼以下

<template>
  <div >
      <swiper class="swiper" :options="swiperOption">
        <swiper-slide class="swiper-slide" v-for="(item, index) in slide" :key="index">
           Slide {{item}} 
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
  </div>
</template>
 
<script>
    import 'swiper/dist/css/swiper.css' 
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
        data() {
            return {
                slide: [1,2,3,4,5,6],
                swiperOption:{
                    direction:'vertical',
                    pagination:{
                        el:'.swiper-pagination'
                    }
                }
            }
        },
        components:{swiper,swiperSlide}
    }
</script>
 
<style scoped>
  .swiper-slide{
      height: 4rem;
      text-align: center;
      line-height: 4rem;
  }
  .swiper{
      height: 7rem;
      border-top:1px solid #ccc;
      border-bottom:1px solid #ccc;
  }
</style>