下文链接：参考https://github.com/surmon-china/vue-awesome-swiper 版本swiper5-6那里面点进去 看详情
1、下载
npm install vue-awesome-swiper --save
2、绑定全局 在main.js里面
import Vue from'vue'
// require styles
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper,/* { default global options } */)
3、SPA单页面应用
<!-- The ref attr used to find the swiper instance -->
<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>
<!-- Optional controls -->
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
</template>
<script>
export default {
name: 'carrousel',
data() {
return {
swiperOption: {
// some swiper options/callbacks
// 所有的参数同 swiper 官方 api 参数
// ...
}
}
},
computed: {
swiper() {
return this.$refs.mySwiper.$swiper
//(官网是this.$refs.mySwiper.swiper，但是我本地this.$refs.mySwiper打印出来里面只有$swiper,只能通过this.$refs.mySwiper.$swiper才能正确获取到swiper，不加$的swiper打印出来是undefined)
//oh my god 我发现是版本问题 不同版本这里用的不一样 swiper5-6是$swiper 但是swiper4x是swiper 在引入css那里 css的路径也是不一样的 两个版本的 一个是css/swiper.css 一个是dist/css/swiper.css 参考https://github.com/surmon-china/vue-awesome-swiper 版本那里面点进去 看详情
}
},
mounted() {
// current swiper instance
// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
console.log('this is current swiper instance object', this.swiper)
this.swiper.slideTo(3, 1000, false)
}
}
</script>
如果是异步获取数据也可以试试this.$nextTick() 这里用settimeout代替接口请求
异步请求 不知对错 暂时没对接口
版本信息
原文的截图
网友评论