vue-awesome-swiper 和swiper 5 结合使用

vue-awesome-swiper 和swiper 5 结合使用总结

和swiper死亡翻滚的一周。。。
版本对应： vue-awesome-swiper：4.1.1 swiper：5.4.5
官网API： http://caibaojian.com/swiper-api/start/new.html

//引入：
 import VueAwesomeSwiper from 'vue-awesome-swiper'
//使用：
 Vue.use(VueAwesomeSwiper)
//该版本引入的css：
 import 'swiper/css/swiper.css'

   <swiper :options="swiperOption" ref="mySwiper"
           :pagination="{ clickable: true }">
        <swiper-slide>
          <div class="nav banner">
            <div class="gear">
              <div class="create_out"><img class="create animated fadeIn" alt="" src="../assets/img/CREATE.png"/></div>
              <div class="gear_out"><img class="gif" alt="" src="../assets/img/gear.gif"/></div>
            </div>
          </div>
        </swiper-slide>
   </swiper>
   

  let _this = this
  swiperOption: {
        observer: true,
        noSwipingClass : 'scroll-wrap',
        autoResize : false,
     //   direction: 'vertical', 垂直滚动
        slidesPerView: 1,
        slidesPerColumn: 3,  //一页三行
        spaceBetween: 30,
        setWrapperSize: true,
        height: window.innerHeight,
        width: window.innerWidth,
        mousewheel: true,
        pagination : '.pagination',
        paginationClickable :true,
        on: {
          slideChange: function () {
            _this.active = this.activeIndex
            if(this.activeIndex === 1){
              _this.isNavThree = true
              /* 移除active样式，否则 animate 效果只执行一次 */
              setTimeout(()=>{
                _this.isNavThree = false
              },2000)
            }
          },
           //当swiper是最后一页时进入
           reachEnd: function(){
                // 只有一页时不请求分页
                if(_this.activeIndex > 1){
                  _this.loadMore()
                }else {
                  return
                }
            },
            //当swiper视口改变时进入
            resize: function() {
              _this.reRenderSwiper()
            }
        },
      },
methods: {
//跳转到指定页
   slideTo(index){
      this.$refs.mySwiper.$swiper.slideTo(index)
      this.active = index
    },}

css 样式

** 1. 每个swiper-slide 需要给固定高度，否则不显示 **