vue3 实现门户网站页面鼠标滚轮控制页面上下滚动---类似轮播图

最新推荐文章于 2025-03-05 12:03:25 发布

我家媳妇儿萌哒哒

最新推荐文章于 2025-03-05 12:03:25 发布

阅读量1.9k

点赞数 2

分类专栏： vue vue3 文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/qq_44146522/article/details/127388455

版权

vue 同时被 2 个专栏收录

40 篇文章

订阅专栏

7 篇文章

订阅专栏

该博客详细介绍了如何使用Vue.js结合JavaScript函数防抖实现鼠标滚轮事件监听，以控制页面内容的平滑滚动。通过监听'mousewheel'和'DOMMouseScroll'事件，并结合防抖函数debounce防止频繁调用，实现在不同页面间平滑切换的效果。代码示例中展示了如何设置不同页面的样式以实现平移和层级变化，从而创建出类似轮播图的浏览体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

案例参考：首页_CNESA 储能研究平台

鼠标滚轮事件监听：

//监听鼠标滚动事件

window.addEventListener('mousewheel', debounce(methodB,300), true)||window.addEventListener("DOMMouseScroll",debounce(methodB,300),false)

//函数防抖

const debounce = (func, wait) =>{

let timeout;

return function() {

let context = this;

let args = arguments;

if (timeout) clearTimeout(timeout);

timeout = setTimeout(() => {

func.apply(context, args)

}, wait);

}

具体实现代码

<template>
  <div class="home">
    <div class="swiper">
      <div class="page1 page" :style="{transform:pageIndex <= 1 ? 'translate3d(0, 0, 0)' :'translate3d(0, -100%, 0)',zIndex:6}">1</div>
      <div class="page2 page" :style="{transform:pageIndex <= 2 ? 'translate3d(0, 0, 0)' :'translate3d(0, -100%, 0)',zIndex:5}">2</div>
      <div class="page3 page" :style="{transform:pageIndex <= 3 ? 'translate3d(0, 0, 0)' :'translate3d(0, -100%, 0)',zIndex:4}">3</div>
      <div class="page3 page" :style="{transform:pageIndex <= 4 ? 'translate3d(0, 0, 0)' :'translate3d(0, -100%, 0)',zIndex:3}">4</div>
      <div class="page3 page" :style="{transform:pageIndex <= 5 ? 'translate3d(0, 0, 0)' :'translate3d(0, -100%, 0)',zIndex:2}">5</div>
      <div class="page3 page" :style="{transform:pageIndex <= 6 ? 'translate3d(0, 0, 0)' :'translate3d(0, -100%, 0)',zIndex:1}">6</div>
    </div>
  </div>
</template>

<script>
import {defineComponent,onMounted, ref} from 'vue';

export default defineComponent({
  name: 'Home',
  setup () {
    let pageIndex = ref(1)
     //函数防抖
    const debounce = (func, wait) =>{
        let timeout;
        return  function() {
            let context = this;
            let args = arguments;
            if (timeout) clearTimeout(timeout);
            timeout = setTimeout(() => {
                func.apply(context, args)
            }, wait);
        }
    }
    // 滚轮监听
    const methodB = ( e) => {
      console.log(e.deltaY)
      if(e.deltaY > 0 && pageIndex.value == 6){ //  下一张  最后一张
        pageIndex.value = 1
      }else if(e.deltaY > 0 && pageIndex.value != 6){//  下一张    不等于最后一张
        pageIndex.value++
      }else if(e.deltaY < 0 && pageIndex.value != 1){//  上一张 不等于第一张
        pageIndex.value--
      }else if(e.deltaY < 0 && pageIndex.value == 1){ //  上一张 第一张
        pageIndex.value = 1
      }else{
        return
      }
      console.log(pageIndex.value)
    }
    onMounted(()=>{
      //监听鼠标滚动事件
      window.addEventListener('mousewheel', debounce(methodB,300), true)||window.addEventListener("DOMMouseScroll",debounce(methodB,300),false)
    })
    return {
      pageIndex
    }
  }
})
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  opacity: 1;
  .swiper{
    overflow: hidden;
    touch-action: none;
  }
  .page {
    width: 100%;
    height: 100vh;
    background-image: url(http://research-static.oss-cn-qingdao.aliyuncs.com/img/index_3.png);
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    color: #fff;
    position: absolute;
    transition: transform 1s;  // 变化时长
  }
}
</style>