本文實例為大家分享了vue實現(xiàn)全屏滾動效果（的具體代碼，供大家參考，具體內(nèi)容如下

是什么

網(wǎng)頁的一個頁面占據(jù)一屏的寬高，多個頁面上下或者左右拼接在一起。當滑動鼠標滾輪，或點擊導航按鈕時，可以平滑到對應的頁面。

此次只實現(xiàn)鼠標滾動

實現(xiàn)原理

使用mousewheel , DOMMouseScroll(火狐用)監(jiān)聽鼠標滾動事件，當鼠標上下的滾動的時候，當前的頁面transformY(屏高)或者transformX(屏寬)

代碼實現(xiàn)

HTML

<template> <div ref='fullPage'> <div ref='fullPageContainer' @mousewheel='mouseWheelHandle' //監(jiān)聽鼠標事件 @DOMMouseScroll='mouseWheelHandle' // 監(jiān)聽鼠標事件 > <div class='section section1'>1</div> <div class='section section2'>2</div> <div class='section section3'>3</div> <div class='section section4'>4</div> </div> </div></template>

JS

<script>export default { name: 'Home', data() { return { fullpage: { current: 1, // 當前的頁面編號 isScrolling: false, // 是否在滾動,是為了防止?jié)L動多頁，需要通過一個變量來控制是否滾動 deltaY: 0 // 返回鼠標滾輪的垂直滾動量，保存的鼠標滾動事件的deleteY,用來判斷是往下還是往上滾 } }; }, methods: { next() { // 往下切換 let len = 4; // 頁面的個數(shù) if (this.fullpage.current + 1 <= len) { // 如果當前頁面編號+1 小于總個數(shù)，則可以執(zhí)行向下滑動 this.fullpage.current += 1; // 頁面+1 this.move(this.fullpage.current); // 執(zhí)行切換 } }, pre() {// 往上切換 if (this.fullpage.current - 1 > 0) { // 如果當前頁面編號-1 大于0，則可以執(zhí)行向下滑動 this.fullpage.current -= 1;// 頁面+1 this.move(this.fullpage.current);// 執(zhí)行切換 } }, move(index) { this.fullpage.isScrolling = true; // 為了防止?jié)L動多頁，需要通過一個變量來控制是否滾動 this.directToMove(index); //執(zhí)行滾動 setTimeout(() => { //這里的動畫是1s執(zhí)行完，使用setTimeout延遲1s后解鎖 this.fullpage.isScrolling = false; }, 1010); }, directToMove(index) { let height = this.$refs['fullPage'].clientHeight; //獲取屏幕的寬度 let scrollPage = this.$refs['fullPageContainer']; // 獲取執(zhí)行tarnsform的元素 let scrollHeight; // 計算滾動的告訴，是往上滾還往下滾 scrollHeight= -(index - 1) * height + 'px'; scrollPage.style.transform = `translateY(${scrollHeight})`; this.fullpage.current = index; }, mouseWheelHandle(event) { // 監(jiān)聽鼠標監(jiān)聽 // 添加冒泡阻止 let evt = event || window.event; if (evt.stopPropagation) { evt.stopPropagation(); } else { evt.returnValue = false; } if (this.fullpage.isScrolling) { // 判斷是否可以滾動 return false; } let e = event.originalEvent || event; this.fullpage.deltaY = e.deltaY || e.detail; // Firefox使用detail if (this.fullpage.deltaY > 0) { this.next(); } else if (this.fullpage.deltaY < 0) { this.pre(); } } }};</script>

CSS

<style scoped>.fullPage{ height: 100%;//一定要設置，保證占滿 overflow: hidden;//一定要設置，多余的先隱藏 background-color: rgb(189, 211, 186);}.fullPageContainer{ width: 100%; height: 100%; transition: all linear 0.5s;}.section { width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat;}.section1 { background-color: rgb(189, 211, 186); background: url('./assets/intro-bg.jpg');}.section1 .secction1-content { color: #fff; text-align: center; position: absolute; top: 40%; right: 0; left: 0;}.secction1-content h1 { font-size: 40px; padding-bottom: 30px;}.secction1-content p { font-size: 20px;}.section2 { background-color: rgb(44, 48, 43);}.section3 { background-color: rgb(116, 104, 109);}.section4 { background-color: rgb(201, 202, 157);}</style>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網(wǎng)。