当前位置: 首页 > 工具软件 > awesome-koa > 使用案例 >

Vue.js+Koa2移动电商实战10

戈华茂
2023-12-01

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>

 

转载于:https://www.cnblogs.com/xiaofandegeng/p/9087018.html

 类似资料: