1、安装vue-awesome-swiper
npm install swiper vue-awesome-swiper --save
2、引入
(1)全局在main.js中引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper)
(2)局部引入
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
components: {
Swiper,
SwiperSlide
}
}
3、示例
<template>
<div>
<swiper class="swiper-container" ref="mySwiper" :options="swiperOptions">
<swiper-slide class="swiper-slide" :style="swiperStyle" v-for="(item,index) in stepActive" :key="index" :ref="'item'+item" >
<!-- 添加试题内容区域 -->
<div @click="setTranslate(index)">
{{item}}
<img src="@/assets/home/video_bgs.png" alt="">
</div>
</swiper-slide>
</swiper>
</div>
</template>
<script>
// 引入swiper滑动组件
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
components: {
Swiper,
SwiperSlide
},
data () {
return {
swiperStyle: {},
swiperOptions: {
slidesPerView: 'auto',
freeMode: false, // 随意拖动位置
mousewheel: true
},
stepActive: 6
}
},
computed: {
swiper () {
return this.$refs.mySwiper.$swiper
}
},
watch: {
stepActive: {
handler (newVal, oldVal) {
console.log(this.stepActive)
if (this.stepActive) {
// this.swiperStyle = 'width:' + 2000 * this.stepActive / 16 + 'px' // 动态设置宽度
this.swiperStyle = 'width:' + 2000 + 'px' // 动态设置宽度
}
},
immediate: false
}
},
destroyed () {
this.swiper.destroy(false)
},
methods: {
setTranslate (index) {
console.log(index, this.swiper.width, this.$refs['item' + index][0].getBoundingClientRect())
this.swiper.setTransition(500)// 设定过渡的时间
this.swiper.setTranslate(0 - 3000 * (index - 1) + (this.swiper.width / 2 - 2000 / 2))// 设定位移,可以为正数
}
}
}
</script>
<style lang="scss" scoped>
.swiper-container {
.swiper-wrapper {
transition: all 0.5s;
}
.swiper-slide {
// 内容
}
}
</style>
注意啦~,安装时,此处有坑
找不到swiper.css,那就安装个swiper呗 ,但是,安装时没有带版本,npm默认给你装的是swiper6,文件夹里的路径跟swiper4都不一样
指定版本号安装
npm install vue-awesome-swiper@3 --save-dev
版本: vue@2.5.2,vue-awesome-swiper@3.1.3
// 引入插件
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
获取插件的realIndex下标值(2种方法)
方法一
坑1:官方文档,this.$refs.mySwiper.$swiper 的写法有问题,在全局引入根本拿不到,将其改为this.$refs.mySwiper.swiper
错误写法:
正确写法:
computed: {
swiper () {
return this.$refs.mySwiper.swiper
}
}
坑2:监听 @slideChange="slideChange",在
slideChange事件中,使用 this.$refs.mySwiper.swiper 取不到,将其改为 this.$refs.mySwiper.$swiper 即可
<swiper class="swiper-container" ref="mySwiper" :options="swiperOptions" @slideChange="slideChange">
<swiper-slide class="swiper-slide" v-for="(eng,engId) in engList" :key="engId" :ref="'item'+eng">
<img :src="eng.image" />
</swiper-slide>
</swiper>
methods: {
slideChange () {
let swiperIndex = this.$refs.mySwiper.$swiper.activeIndex
console.log('下标', swiperIndex)
}
}
方法二
<swiper class="swiper-container" ref="mySwiper" :options="swiperOptions">
<swiper-slide class="swiper-slide" v-for="(eng,engId) in engList" :key="engId" :ref="'item'+eng">
<img :src="eng.image" />
</swiper-slide>
</swiper>
data () {
const self = this
return {
swiperOptions: {
slidesPerView: 'auto',
freeMode: false, // 随意拖动位置
mousewheel: false,
on: {
slideChange () {
var index = this.activeIndex
self.slideChange(index)
}
}
}
}
}
methods: {
slideChange (index) {
console.log('下标', index)
}
}
点击跳转到对应的index页面
其中如果需要用到这一插件进行跳转的话,只能用其对用的下标 “index” 进行,下面传下标就能跳转了
changeIndex (index) {
this.$refs.mySwiper.$swiper.slideTo(index, 1000, true)// 切换到第一个slide,速度为1秒
},
禁止手动左右滑动的操作
只需要在 swiper-slide 标签上加上class样式名(swiper-no-swiping)即可
<swiper class="swiper-container" ref="mySwiper" :options="swiperOptions">
<swiper-slide class="swiper-slide swiper-no-swiping" v-for="(eng, engId) in basicsList" :key="engId" :ref="'item' + eng"></swiper-slide>
</swiper>
数据量大操作卡顿不够流畅的话,可将 swiper-slide标签 修改为 swiper-item标签
<swiper class="swiper-container" ref="mySwiper" :options="swiperOptions">
<swiper-item class="swiper-slide swiper-no-swiping" v-for="(eng, engId) in basicsList" :key="engId" :ref="'item' + eng"></swiper-item>
</swiper>
避坑,直接换成swiper-item会提示报错
解决方法:swiper-item标签不支持h5,将swiper-item修改成div+类名
<swiper class="swiper-container" ref="mySwiper" :options="swiperOptions">
<div class="swiper-slide swiper-no-swiping" v-for="(eng, engId) in basicsList" :key="engId" :ref="'item' + eng"></div>
</swiper>
希望我的愚见能够帮助你哦~,若有不足之处,还望指出,你们有更好的解决方法,欢迎大家在评论区下方留言支持,大家一起相互学习参考呀~