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

这篇具有很好参考价值的文章主要介绍了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.js(自适应高度autoHeight)做鼠标滚轮整屏滑动功能

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

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

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

这里有一个坑:虽然设置了,却没生效

解决方法:

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

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

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

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

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

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

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

 文章来源地址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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • QT笔记——QSlider滑动条滚轮事件和点击鼠标位置事件问题

    需求:我们需要对一个滑动条 滚轮事件 和 点击到滑动条的位置 实时显示 问题:其中在做的时候遇到了很多的问题,一开始感觉很简单,现在将这些问题记录下来 ui图: 问题1:处理QSlider 滚轮事件的时候 这里有很大的问题,但是不知道原因,为什么会出现这样的原因,网上

    2024年02月01日
    浏览(46)
  • js实现滚轮滑动到底部自动加载

    这里我们用vue实现(原生js相似), 这里我们用一个div当作一个容器; css样式 给上面div添加一个高度 在methods中编写我们的滚动条方法 onScroll(){        // let innerHeight=document.querySelector(\\\"JL\\\").clientHeight //js中使用         //let scrollHeight=document.querySelector(\\\"JL\\\").scrollHeight       

    2024年02月12日
    浏览(41)
  • echarts部分图表自带鼠标滚轮滑动整体缩放效果与拖拽整体移动效果,如何取消?

    部分echarts图表在可视区域自带鼠标滚轮缩放和拖拽移动效果。这个效果在部分场景中是多余的, 怎么将其效果取消呢? roam:true(可拖动,可缩放);false(不可拖动,不可缩放) dome Tips 实现满足上诉需求的属性即 roam。 部分echarts图表类型 不存在roam属性,即该类型图表不支

    2024年02月04日
    浏览(53)
  • js实现滚轮滑动到底部自动加载(完整版)

    这里我们用vue实现(原生js相似), 这里我们用一个div当作一个容器; css样式 给上面div添加一个高度 在methods中编写我们的滚动条方法 onScroll(){        // let innerHeight=document.querySelector(\\\"JL\\\").clientHeight //js中使用         //let scrollHeight=document.querySelector(\\\"JL\\\").scrollHeight       

    2024年02月12日
    浏览(42)
  • js监听鼠标滚轮事件

    通过原生js监听鼠标滚轮事件 通过jquery实现鼠标滚轮事件,若ie8无法实现,降低jquery版本

    2024年02月16日
    浏览(52)
  • js实现图片的放大缩小(鼠标长按拖拽、鼠标滚轮控制放大缩小)

    该功能的需求点事2个月前的一个需求,当时采用的是Element-UI中的image图片做的一个功能,但是不能满足产品真实的需求,只能定制化自己封装。 该功能在Vue2 的element-UI中还是比较鸡肋的 ⬇️ ⬇️ Element-UI 该功能在Emenent-UI-plus(vue3)版本已经很好的支持了。 完整功能如下

    2024年02月03日
    浏览(86)
  • css、js(vue)进行textarea自适应高度(超详细说明)

    黑色部分——页面布局为上左右下布局 红色部分——在右边有一个文本域,自适应高度,最小高度128px,最大高度不能超过右边屏幕的一半,里面有一个距离右下16px的确认按钮 效果如下图 问题1: 会导致有多余留白 问题2:超出限制的高度也不会出现滚动条(由问题1延申而

    2024年02月13日
    浏览(40)
  • js 以鼠标滚轮位置为中心缩放、放大以及边界判断

    项目需求为页面上实现拖拽节点和可以在页面中通过滑动滚轮来缩放节点显示(以鼠标位置为缩放中心点)从而放大到可以看到详细的信息,节点有10000个。特此记录下实现细节 初始化变量 为节点绑定拖拽事件,拖拽事件的边界使用 Math 进行判断,比起 if 判断更加清晰快捷

    2024年02月11日
    浏览(55)
  • Fabric.js+vue 实现鼠标滚轮缩放画布+移动画布

    话不多说 直接贴代码 一、实现鼠标滚轮缩放画布 使用说明,我的canvas画布定义为 canvas,替他均不用额外设置变量。canvas = new fabric.Canvas(\\\'editorCanvas\\\', {... 二、实现鼠标按下变抓手,并可移动画布中内容 使用说明:data中定义panning: false,用来标记鼠标按下状态(是否鼠标按下)

    2024年02月09日
    浏览(55)
  • HTML5+CSS3+JS小实例:鼠标滚轮水平滚动

    实例:鼠标滚轮水平滚动 技术栈:HTML+CSS+JS 效果: 源码: 【html】

    2024年02月06日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包