vue實現滾動滑鼠滾輪切換頁面
阿新 • • 發佈:2020-12-15
本文例項為大家分享了vue實現滾動滑鼠滾輪切換頁面的具體程式碼,供大家參考,具體內容如下
新專案產品被甲方的要求逼瘋了,大概返稿了100+次吧,最後甲方網上找了個他們認為的比較有科技感的模板,讓我們照著寫,首頁就是類似於縱向走馬燈,滑鼠滾動切換,一次切換一整屏的效果。之前沒接觸過,寫了個簡單的demo,僅作為學習筆記。
其實原理很簡單,就是把所有頁面放在一個div中,然後滾動的時候改變外層div的top即可。
因為滾動條監聽事件是實時的,所以要加上節流來防止頁面切換太快速,我這控制在1.5s才能切換一頁。
其實vue不應該操作dom,應該用資料來渲染虛擬dom,但是有些地方暫時沒找到合適的方法,還是用的dom操作。
<template> <div id="wrap" :style="{ height: screenHeight + 'px' }"> <div id="main" :style="{ top: nowTop + 'px' }"> <ul id="pageUl" type="circle"> <li id="pageUlLi1" class="pageUlLi" :class="{'active': curIndex == 1}"> </li> <li id="pageUlLi2" class="pageUlLi" :class="{'active': curIndex == 2}"> </li> <li id="pageUlLi3" class="pageUlLi" :class="{'active': curIndex == 3}"> </li> <li id="pageUlLi4" class="pageUlLi" :class="{'active': curIndex == 4}"> </li> <li id="pageUlLi5" class="pageUlLi" :class="{'active': curIndex == 5}"> </li> </ul> <div style="background-color: #1b6d85" id="page1" class="page"></div> <div style="background-color: #5cb85c" id="page2" class="page"></div> <div style="background-color: #8a6d3b" id="page3" class="page"></div> <div style="background-color: #337ab7" id="page4" class="page"></div> <div style="background-color: #66512c" id="page5" class="page"></div> </div> </div> </template> <script> export default { name: 'Home',data(){ return{ screenWeight: 0,// 螢幕寬度 screenHeight: 0,// 螢幕高度 index: 1,// 用於判斷翻頁 curIndex: 1,// 當前頁的index startTime: 0,// 翻屏起始時間 endTime: 0,// 上一次翻屏結束時間 nowTop: 0,// 翻屏後top的位置 pageNum: 0,// 一共有多少頁 main: Object,obj: Object } },mounted(){ this.screenWeight = document.documentElement.clientWidth; this.screenHeight = document.documentElement.clientHeight; this.main = document.getElementById("main"); this.obj = document.getElementsByTagName("div"); for (let i = 0; i < this.obj.length; i++) { if (this.obj[i].className == 'page') { this.obj[i].style.height = this.screenHeight + "px"; } } this.pageNum = document.querySelectorAll(".page").length; // 瀏覽器相容 if ((navigator.userAgent.toLowerCase().indexOf("firefox") != -1)) { document.addEventListener("DOMMouseScroll",this.scrollFun,false); } else if (document.addEventListener) { document.addEventListener("mousewheel",false); } else if (document.attachEvent) { document.attachEvent("onmousewheel",this.scrollFun); } else { document.onmousewheel = this.scrollFun; } },methods:{ scrollFun(event) { this.startTime = new Date().getTime(); // mousewheel事件中的 “event.wheelDelta” 屬性值:返回的如果是正值說明滾輪是向上滾動 // DOMMouseScroll事件中的 “event.detail” 屬性值:返回的如果是負值說明滾輪是向上滾動 let delta = event.detail || (-event.wheelDelta); // 如果當前滾動開始時間和上次滾動結束時間的差值小於1.5s,則不執行翻頁動作,這樣做是為了實現類似節流的效果 if ((this.startTime - this.endTime) > 1500) { if (delta > 0 && parseInt(this.main.offsetTop) >= -(this.screenHeight * (this.pageNum - 2))) { // 向下滾動 this.index++; this.toPage(this.index); }else if (delta < 0 && parseInt(this.main.offsetTop) < 0) { // 向上滾動 this.index--; this.toPage(this.index); } // 本次翻頁結束,記錄結束時間,用於下次判斷 this.endTime = new Date().getTime(); } },// 翻頁 toPage(index) { if (index != this.curIndex) { let delta = index - this.curIndex; this.nowTop = this.nowTop - delta * this.screenHeight; this.curIndex = index; } } } } </script> <style> html,body { height: 100%; } body,ul,li,a,p,div { /*慎刪*/ padding: 0px; margin: 0px; } #wrap { overflow: hidden; width: 100%; } #main { position: relative; transition:top 1.5s; } .page { /*謹刪*/ width: 100%; margin: 0; } #pageUl { position: fixed; right: 10px; bottom: 50%; } .active{ color: red; } </style>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。