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

这篇具有很好参考价值的文章主要介绍了vue3 实现门户网站页面鼠标滚轮控制页面上下滚动---类似轮播图。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

案例参考：首页_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);

}

具体实现代码文章来源地址https://www.toymoban.com/news/detail-526171.html

<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>

到了这里，关于vue3 实现门户网站页面鼠标滚轮控制页面上下滚动---类似轮播图的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！