如果你还不知道自己喜欢什么，你就真的迷失了
前言
今晚很安静，像极了认真工作的你，眼睛里没有任何喧闹
1 介绍
常用配置项
const options = {
// 一屏展示几张图片或几个按钮
slidesPerView: 3,
// 每次滑动几张图片或几个按钮
slidesPerGroup: 1,
// 是否循环
loop: false,
// 每张播放时长，自动播放
autoplay: 2000,
// 滑动速度
speed: 1000,
// 是否显示分页
pagination: {
el: '.swiper-pagination'
},
// 是否显示按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
}
常用属性
direction
// 方向 horizontal | vertical
swiper.direction
activeIndex
// 当前索引
swiper.activeIndex
isBeginning
// 是否到达开始位置
swiper.isBeginning
isEnd
// 是否到达结束位置
swiper.isEnd
allowSlideNext
// 是否允许滑动到下一页
// 设置为false，阻止滑动到下一页(前进)
swiper.allowSlideNext
allowSlidePrev
// 是否允许滑动到上一页
// 设置为false，阻止滑动到上一页(返回)
swiper.allowSlidePrev
常用方法
slideNext
// 下一页
// 每次滚动 slidesPerGroup 张图片，默认为1张
swiper.slideNext()
slidePrev
// 上一页
// 每次滚动 slidesPerGroup 张图片，默认为1张
swiper.slidePrev()
slideTo
// 滚动到指定索引位置
// 索引从0开始
swiper.slideTo(index, speed)
常用事件
slideChange
// 滑动导致索引变化时触发
// 实时获取当前索引 swiper.activeIndex
@slideChange = “slideChange”
slideNextTransitionStart
// 上滑，切到下一页
@slideNextTransitionStart = “slideNextTransitionStart”
slidePrevTransitionStart
// 下滑，切到上一页
@slidePrevTransitionStart = “slidePrevTransitionStart”
2 使用
安装
// 3+版本比较稳定，最新版本支持vue3+, 兼容性不太好
npm install vue-awesome-swiper@3 --save
切换
<template>
<swiper :options="swiperOption" ref="mySwiper" @slideChange="slideChange">
<!-- 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" @click="prevClick"></div>
<div class="swiper-button-next" slot="button-next" @click="nextClick"></div>
<!-- <div class="swiper-scrollbar" slot="scrollbar"></div> -->
</swiper>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
// Import Swiper styles
export default {
components: {
swiper,
swiperSlide
},
data () {
return {
swiperOption: {
// slidesPerView: 'auto',
slidesPerView: 3,
// slidesPerGroup: 3,
spaceBetween: 30,
// 循环
loop: false,
// 每张播放时长3秒，自动播放
autoplay: 2000,
// 滑动速度
speed: 1000,
// eslint-disable-next-line no-dupe-keys
pagination: {
el: '.swiper-pagination'
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
},
index: 0
}
},
computed: {
swiper () {
return this.$refs.mySwiper.swiper
}
},
mounted () {
// current swiper instance
// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
console.log('this is current swiper instance object', this.swiper)
// this.swiper.slideTo(2, 1000, false)
},
methods: {
onSwiper (swiper) {
console.log(swiper)
},
onSlideChange () {
console.log('slide change')
},
prevClick () {
!this.swiper.isBeginning && (this.index -= 2)
this.index = Math.max(0, this.index)
this.swiper.slideTo(this.index, 1000, false)
console.log(this.index)
console.log(this.swiper.isBeginning)
},
nextClick () {
!this.swiper.isEnd && this.index++
this.swiper.slideNext()
console.log(this.swiper.isEnd)
console.log(this.index)
},
slideChange () {
this.index = this.swiper.activeIndex
console.log(this.index)
}
}
}
</script>
<style>
* {
touch-action: none;
}
.swiper-slide:nth-child(2n) {
width: 60%;
}
.swiper-slide:nth-child(3n) {
width: 40%;
}
</style>
3.注意
1.最新版本配置 navigation，点击左右按钮不生效
2.滑动报错，使用 touch-action: none 处理
3.自定义prevClick 和 nextClick，灵活处理滑动距离
尾声
不用太着急去否定一些东西，也许只是今天心情不太好
晚安 ^_^
