在Vue中使用swiper 一:安装
npm install vue-awesome-swiper --save
二:引入 在全局main.js内:
import vueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(vueAwesomeSwiper)
在使用的组件页面内:
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
三:案例:
<template>
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<!-- slides -->
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<swiper-slide>I'm Slide 4</swiper-slide>
<swiper-slide>I'm Slide 5</swiper-slide>
<swiper-slide>I'm Slide 6</swiper-slide>
<swiper-slide>I'm Slide 7</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
<div class="swiper-scrollbar" slot="scrollbar"></div>
</swiper>
</template>
其中,swiper的属性 @someSwiperEvent="callback”
@someSwiperEvent为父组件定义的事件,如果有需要可在此处(子组件)赋予回调操作,没有操作需要时删掉即可。
之前引入时:
import { swiper, swiperSlide } from "vue-awesome-swiper";
引入了 swiperSlide
(在使用时驼峰命名会变成使用横线分割,因为HTML标签不区分大小写)所以可以使用 <swiper-slide>
标签
swiper-slide
内为轮播的内容,下方各个div为可视操作按钮,例如左右箭头、底部小圆点以及展示当前第几张的滚动条/进度条等
在组件的 data
内设置 swiperOption
:
data() {
return {
swiperOption: {
loop: true,
autoplay: {
delay: 3000,
speed: 200,
disableOnInteraction: false, //用户操作swiper后是否禁止autoplay,默认为true:操作后停止。操作包括触碰、拖动、点击分页器pagination等
stopOnLastSlide: false //为true时当切换到最后一个slide时停止自动切换
},
on: {
slideChangeTransitionStart: function() { //回调函数,swiper从当前slide开始过渡到另一个slide时执行。
//do something
}
}
}
};
},
事件类操作在
on: {
}
内编写。 组件的components引入:
components: {
swiper,
swiperSlide
},
在computed内设置:
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
}
},
操作时对data内的 swiperOption
修改即可
其他API信息:www.swiper.com.cn/api/index.h…
Vue.$set 为已存在的对象新增属性
Vue 刷新当前页面
vue.$emit父子组件通信 blog.csdn.net/sllailcp/ar…
以及bus总线