新项目产品被甲方的要求逼疯了，大概返稿了100+次吧，最后甲方网上找了个他们认为的比较有科技感的模板，让我们照着写，首页就是类似于纵向走马灯，鼠标滚动切换，一次切换一整屏的效果。之前没接触过，写了个简单的demo，仅作为学习笔记。
其实原理很简单，就是把所有页面放在一个div中，然后滚动的时候改变外层div的top即可。
因为滚动条监听事件是实时的，所以要加上节流来防止页面切换太快速，我这控制在1.5s才能切换一页。
其实vue不应该操作dom，应该用数据来渲染虚拟dom，但是有些地方暂时没找到合适的方法，还是用的dom操作。
-09-26补充：推荐使用满屏滚动插件：GitHub - alvarotrigo/fullPage.js: fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple
<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, // 当前页的indexstartTime: 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", this.scrollFun, 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>
如果觉得《vue实现滚动鼠标滚轮切换页面 类似于纵向走马灯 满屏滚动》对你有帮助，请点赞、收藏，并留下你的观点哦！
