vue项目在移动端使用swiper插件做竖向轮播

swiper官网点击
简单的一个demo演示代码。
1.下载npm install swiper vue-awesome-swiper --save
2.main.js：

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper)

3.文件：

<template>
  <div v-swiper:mySwiper="swiperOption">
    <div class="swiper-wrapper" >
      <div class="swiper-slide box" :key="banner" v-for="banner in banners">{{banner}} </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        banners: [ '111页面', '222页面', '333页面' ],
        swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          },
          direction: 'vertical',//设置竖向轮播
        }
      }
    },
    mounted() {
      this.mySwiper.slideTo(0, 1000, false)//swiper插件的slide的索引;切换速度;设置为false时不会触发transition回调函数

    }
  }
</script>
<style scoped>
.box{
  width: 375px;
  height: 400px;
  background: pink;
}
</style>

4.遇到的场景
4.1 点击按钮到第二页

  <div @click="next()">点击</div>

  next(){
      this.mySwiper.slideTo(1, 1000, false)//swiper插件的slide的索引;切换速度;设置为false时不会触发transition回调函数          
   },

4.2监听swiper 索引切换做一些功能：重点是let self = this

 data () {
      let self = this
      return {
        is_show:0,
        swiperOption: { //插件
            pagination: {el: '.swiper-pagination'},
            direction: 'vertical',
            on: {
                slideChangeTransitionEnd: function(){
                  // this.activeIndex 是索引index，这个用this才可以获取到
                  // 其他参数用self 获取修改才生效
                    self.is_show = 1
                    console.log(this.activeIndex)
                },
            }
        },
      }
    },