目录
初始化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%;是为了解决有白边的问题
文章来源:https://www.toymoban.com/news/detail-485605.html
文章来源地址https://www.toymoban.com/news/detail-485605.html
完整代码:
<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>
到了这里,关于swiper.js(自适应高度autoHeight)做鼠标滚轮整屏滑动功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!