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>