vue 使用vue-awesome-swiper实现原生滑动切换及点击动画切换TAB

首先需要引入vue-awesome-swiper，代码如下:

import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

在main.js引入 css import '../../static/swiper/swiper.min.css'

这样咱们就可以使用swiper了，使用代码如下：

这是里面使用的配置：

要自己定义tab 首先要知道点击按钮之后主动跳转到某个banner页面怎么实现，使用swiper方法，使用swiper的全局方法，

这样就可以直接this.swiper 来调用seiper的原生方法了。

跳转到指定页面  this.swiper.slideTo(1, 400, false) 三个参数，第一个是跳转的下标，第二个是跳转的时间，第三个是回调函数，设置为false时不会触发onSlideChange回调函数。

这样就实现了点击某个按钮跳转到某个 banner 的效果了，剩下的就是，滑到某个banner自动点亮某个按钮，官网让用slideChangeEnd，但经测试，这个方法不太好使，我最后用的transitionEnd。

注意：vue中使用方法的时候一定要on:{},这种方式，顶上图里面有示例，原则上swiper官网上的方法都可以使用，但某个确实不可用，不是用的方式不对，就是不支持某个方法。