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>