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>