swiper.js（自适应高度autoHeight）做鼠标滚轮整屏滑动功能

目录

初始化swiper

问题处理

完整代码

---

初始化swiper

1、引入swiper

import { Pagination, Mousewheel } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/scss'
import 'swiper/scss/pagination'

2、添加鼠标滚轮事件:mousewheel="true"，为了更好的体验，我将下面三个属性 都设置了false

allowTouchMove：设置/查看是否禁止触摸滑动。

noSwiping:使该slide无法拖动

keyboard:设置开启键盘来控制Swiper切换。

<swiper
      class="swiper-wrap"
      :modules="[Pagination, Mousewheel]"
      direction="vertical"
      :speed="500"
      :allowTouchMove="false"
      :noSwiping="false"
      :keyboard="false"
      :mousewheel="true"
      :pagination="{ clickable: true, verticalClass: 'anchor' }"
    >
      <swiper-slide v-for="item in imgList" :key="item.id" class="img-box">
        <img class="img-cls" :src="item.link" />
      </swiper-slide>
    </swiper>

3、因为要整屏滑动，所以便将swiper父级以及本身都设置100vh

.con-wrap {
  height: 100vh;
}

.swiper-wrap {
  height: 100%;
}

问题处理

这样就导致一个问题，当网站有头部底部时，由于鼠标滚轮事件被改成swiper切换，须得拖动进度条才能看见完整底部

于是我便将底部也放入swiper中， 然而问题不断呀~ 由于底部高度是有限的，就导致这一页下面有一大片空白区域

后来想到swiper有一个属性:autoHeight="true"，自适应高度

这里有一个坑：虽然设置了，却没生效

解决方法：

:deep(.swiper-slide-active) {
  height: auto !important;
 }

高度是解决了，由于网站是自上往下展示，导致下面的空白区域还是没有解决

 灵机一动，将swiper-slide放在底部展示，这样就完美解决啦~

:deep(.swiper-wrapper) {
  position: absolute;
  bottom: 0;
  max-height: 100%;
}

注：max-height: 100%;是为了解决有白边的问题

 

完整代码：

<template>
  <div class="con-wrap">
    <swiper
      class="swiper-wrap"
      :modules="[Pagination, Mousewheel]"
      direction="vertical"
      :speed="500"
      :allowTouchMove="false"
      :noSwiping="false"
      :autoHeight="true"
      :keyboard="false"
      :mousewheel="true"
      :pagination="{ clickable: true, verticalClass: 'anchor' }"
    >
      <swiper-slide v-for="item in imgList" :key="item.id" class="img-box">
        <img class="img-cls" :src="item.link" />
      </swiper-slide>
      <swiper-slide class="footer-box">
        <layout-footer />
      </swiper-slide>
    </swiper>
  </div>
</template>

<script setup>
  import { Pagination, Mousewheel } from 'swiper'
  import { Swiper, SwiperSlide } from 'swiper/vue'
  import 'swiper/scss'
  import 'swiper/scss/pagination'

  const imgList = ref([
    {
      id: 1,
      link: '',
    },
    {
      id: 2,
      link: '',
    },
  ])
</script>

<style lang="scss" scoped>
// 这里 减掉了头部的高度
.con-wrap {
  height: calc(100vh - 60px);
}

.swiper-wrap {
  position: relative;
  height: 100%;

  :deep(.swiper-wrapper) {
    position: absolute;
    bottom: 0;
    max-height: 100%;
  }

  :deep(.swiper-slide-active) {
    height: auto !important;
  }
}

:deep(.swiper-pagination-bullets.anchor) {
  position: fixed !important;
  right: 80px !important;
  width: 40px;
  padding: 0;
  text-align: center;
  background: rgb(0 0 0 / 60%);
  border-radius: 20px;

  .swiper-pagination-bullet {
    position: relative;
    width: 10px;
    height: 10px;
    margin: 30px auto !important;
    background: #fff;
    border-radius: 50%;
    opacity: 1;

    &.swiper-pagination-bullet-active::after {
      position: absolute;
      top: 50%;
      left: 50%;
      box-sizing: border-box;
      width: 18px;
      height: 18px;
      content: '';
      border: 1px solid #fff;
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

.img-box {
  position: relative;
  width: 100%;
  background-color: #fffbe5;

  .img-cls {
    width: 100%;
    object-fit: cover;
    height: calc(100vh - 60px);
  }
}
</style>