Swiper实现全屏滚动

目标

通过swiper实现类似《仙剑世界》游戏官网 xjsj.cmge.com/home/#curre… 的全屏滚动效果。

案例插件版本

"vue-awesome-swiper": "^3.1.3",

"swiper": "^4.4.2",

配置项

swiperOption: {
        direction: 'vertical',
        slidesPerView: 1,
        keyboard: true,
        mousewheel: true,
       

        // on: {
        //   init: function () {
        //     console.log('init', this.slides)
        //     for (let i = 0; i < this.slides.length; i++) {
        //       const element = this.slides[i];
        //       element.style.height =  `${window.innerHeight}px`;
        //     }
            
        //   },
        //   resize: function () {
        //     console.log('resize')
        //      for (let i = 0; i < this.slides.length; i++) {
        //       const element = this.slides[i];
        //       element.style.height =  `${window.innerHeight}px`;
        //     }
        //   }
        // }
      }

设置swiper容器高度

.app {
  position: relative;
  width: 100%;
  height: calc(var(--window-height, 100vh)); // 如果是PC端，直接设置height为100vh
  ::v-deep .swiper-container {
    height: 100%;
  }
}

--window-height为window.innerHeight，有JS动态设置

window.innerHeight 和 100vh的区别

window.innerHeight不包含底部工具栏的高度；

实现最后一屏高度不等于100vh

类似《仙剑世界》游戏官网 xjsj.cmge.com/home/#curre… 最后一屏的高度小于100vh。此时我们需要修改配置如下：

1. 将swiperOptions的slidesPerView修改为auto。
2. 在on.init中设置最后一屏的高度为auto。

        init:  function (){
          const slides = this?.slides
          const lastSlide = slides[slides.length - 1]
          lastSlide.style.height = 'auto'
        },

实现导航跳转

 this.$refs.swiper?.swiper?.slideTo(index)