vue原生满屏滚动方式
作者:zyy_wx
这篇文章主要介绍了vue原生满屏滚动方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue原生满屏滚动
vue原生满屏滚动效果,点击左侧导航栏可滚动至对应屏幕。
效果图
代码
<template> <div class='page-sum'> <div class='distance'> <!-- 左侧导航栏--> <div class='page-nav'> <div> <div @click='scrollByIndex(0)' class='nav-type'> <p :style="navIndex===0?'color:#00D2C7':''">企业主页</p> </div> <div @click='scrollByIndex(4)' class='nav-type'> <p :style="navIndex===1?'color:#00D2C7':''">案例中心</p> </div> <div @click='scrollByIndex(5)' class='nav-type'> <p :style="navIndex===2?'color:#00D2C7':''">方案中心</p> </div> <div @click='scrollByIndex(7)' class='nav-type'> <p :style="navIndex===3?'color:#00D2C7':''">咨讯库</p> </div> <div @click='scrollByIndex(9)' class='nav-type'> <p :style="navIndex===4?'color:#00D2C7':''">文档库</p> </div> </div> </div> <div class='page-box'> <div class='page-one' style='background: #5daf34'> 第一页 </div> <div class='page-two' style='background: #1b8bff'> 第二页 </div> <div class='page-three' style='background: #00a2d4'> 第三页11 </div> <div class='page-four' style='background: #fab6b6'> 第三页22 </div> <div class='page-five' style='background: #00DECB'> 第四页 </div> <div class='page-six' style='background: #00D2C7'> 第五页11 </div> <div class='page-seven' style='background: #2D64B3'> 第五页22 </div> <div class='page-eight' style='background: #fab6b6'> 第六页11 </div> <div class='page-nine' style='background: #00DECB'> 第六页22 </div> <div class='page-ten' style='background: #00b7ee'> 第七页 </div> </div> </div> </div> </template>
<script> export default { name: 'index', data() { return { navIndex: 0, wheel: 0, style: '' } }, mounted() { this.initWheel() //整屏移动 }, watch: { wheel: { handler(val) { } } }, methods: { initWheel() { this.wheel = 0 // 0 到 10 let timer = 1500 let agent = navigator.userAgent.toLowerCase() let isMac = /macintosh|mac os x/i.test(navigator.userAgent) if (agent.indexOf('win32') >= 0 || agent.indexOf('wow32') >= 0 || agent.indexOf('win64') >= 0 || agent.indexOf('wow64') >= 0) { timer = 1000 } if (isMac) { timer = 1500 } window.addEventListener('wheel', this.throttle(this.wheelHandler, timer)) //兼容mac的方法 1500 timer windows 为1000 mac为1500 }, throttle(func, delay) { let prev = Date.now() return function() { let context = this let args = arguments let now = Date.now() if (now - prev >= delay) { func.apply(context, args) prev = Date.now() } } }, wheelHandler(e) { let main = document.querySelector('.page-box') let headHeight = document.querySelector('.page-one').clientHeight if (e.deltaY > 0) { if (this.wheel === 9) return this.wheel++ } else { if (this.wheel === 0) return this.wheel-- } if (this.wheel === 0) { main.style.transform = `translateY(0)` //整屏上下移 } else { main.style.transform = `translateY(calc(-${headHeight}px - ${(this.wheel - 1) * 100}vh)` //整屏上下移 } // 划分左侧导航栏内有几屏 if (this.wheel >= 0 && this.wheel < 4) { // 0 4 6 8 this.navIndex = 0 } else if (this.wheel >= 4 && this.wheel < 5) { this.navIndex = 1 } else if (this.wheel >= 5 && this.wheel < 7) { this.navIndex = 2 } else if (this.wheel < 9) { this.navIndex = 3 } else if (this.wheel === 9) { this.navIndex = 4 } }, scrollByIndex(index) { let e = { deltaY: 100 } this.wheel = index - 1 this.wheelHandler(e) } } } </script>
<style lang='scss' scoped> .page-sum { width: 100%; height: 100vh; overflow: hidden; position: relative; } .distance { width: 75rem; margin: 0 auto; display: flex; justify-content: space-between; } .page-box { width: 65.625rem; transform: translateY(0); transition: 1s; } .page-one { height: 100vh; position: relative; overflow: hidden; } .page-two { height: 100vh; } .page-three, .page-four { height: 100vh; } .page-five { height: 100vh; } .page-six { height: 100vh; } .page-seven { height: 100vh; } .page-eight { background: #fff; height: 100vh; } .page-nine { width: 100%; height: 100vh; } .page-ten { height: 100vh; } .page-nav { transform: translateY(50%); width: 8rem; height: 22rem; text-align: center; border-radius: 0.125rem; background: #FFF; box-shadow: 2px 1px 8px 1px rgba(208, 208, 208, 0.16); } .nav-type { cursor: pointer; font-size: 1rem; font-weight: 400; line-height: 3rem; color: #323232; } //滚动条的宽度 ::-webkit-scrollbar { width: 0.25rem; height: 0.25rem; } //滚动条的设置 ::-webkit-scrollbar-thumb { background-color: #ddd; background-clip: padding-box; min-height: 1.75rem; } </style>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。