vue实现全屏滚动效果(非fullpage.js)
程序员文章站
2022-06-07 23:04:38
本文实例为大家分享了vue实现全屏滚动效果(的具体代码,供大家参考,具体内容如下是什么网页的一个页面占据一屏的宽高,多个页面上下或者左右拼接在一起。当滑动鼠标滚轮,或点击导航按钮时,可以平滑到对应的页...
本文实例为大家分享了vue实现全屏滚动效果(的具体代码,供大家参考,具体内容如下
是什么
网页的一个页面占据一屏的宽高,多个页面上下或者左右拼接在一起。当滑动鼠标滚轮,或点击导航按钮时,可以平滑到对应的页面。
此次只实现鼠标滚动
实现原理
使用mousewheel , dommousescroll(火狐用)监听鼠标滚动事件,当鼠标上下的滚动的时候,当前的页面transformy(屏高)或者transformx(屏宽)
代码实现
html
<template> <div class="fullpage" ref="fullpage"> <div class="fullpagecontainer" ref="fullpagecontainer" @mousewheel="mousewheelhandle" //监听鼠标事件 @dommousescroll="mousewheelhandle" // 监听鼠标事件 > <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, // 是否在滚动,是为了防止滚动多页,需要通过一个变量来控制是否滚动 deltay: 0 // 返回鼠标滚轮的垂直滚动量,保存的鼠标滚动事件的deletey,用来判断是往下还是往上滚 } }; }, methods: { next() { // 往下切换 let len = 4; // 页面的个数 if (this.fullpage.current + 1 <= len) { // 如果当前页面编号+1 小于总个数,则可以执行向下滑动 this.fullpage.current += 1; // 页面+1 this.move(this.fullpage.current); // 执行切换 } }, pre() {// 往上切换 if (this.fullpage.current - 1 > 0) { // 如果当前页面编号-1 大于0,则可以执行向下滑动 this.fullpage.current -= 1;// 页面+1 this.move(this.fullpage.current);// 执行切换 } }, move(index) { this.fullpage.isscrolling = true; // 为了防止滚动多页,需要通过一个变量来控制是否滚动 this.directtomove(index); //执行滚动 settimeout(() => { //这里的动画是1s执行完,使用settimeout延迟1s后解锁 this.fullpage.isscrolling = false; }, 1010); }, directtomove(index) { let height = this.$refs["fullpage"].clientheight; //获取屏幕的宽度 let scrollpage = this.$refs["fullpagecontainer"]; // 获取执行tarnsform的元素 let scrollheight; // 计算滚动的告诉,是往上滚还往下滚 scrollheight= -(index - 1) * height + "px"; scrollpage.style.transform = `translatey(${scrollheight})`; this.fullpage.current = index; }, mousewheelhandle(event) { // 监听鼠标监听 // 添加冒泡阻止 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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。