vue实现滚动鼠标滚轮切换页面，类似于纵向走马灯、满屏滚动

新项目产品被甲方的要求逼疯了，大概返稿了100+次吧，最后甲方网上找了个他们认为的比较有科技感的模板，让我们照着写，首页就是类似于纵向走马灯，鼠标滚动切换，一次切换一整屏的效果。之前没接触过，写了个简单的demo，仅作为学习笔记。

其实原理很简单，就是把所有页面放在一个div中，然后滚动的时候改变外层div的top即可。

因为滚动条监听事件是实时的，所以要加上节流来防止页面切换太快速，我这控制在1.5s才能切换一页。

其实vue不应该操作dom，应该用数据来渲染虚拟dom，但是有些地方暂时没找到合适的方法，还是用的dom操作。

2021-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}">&nbsp;</li><li id="pageUlLi2" class="pageUlLi" :class="{'active': curIndex == 2}">&nbsp;</li><li id="pageUlLi3" class="pageUlLi" :class="{'active': curIndex == 3}">&nbsp;</li><li id="pageUlLi4" class="pageUlLi" :class="{'active': curIndex == 4}">&nbsp;</li><li id="pageUlLi5" class="pageUlLi" :class="{'active': curIndex == 5}">&nbsp;</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实现滚动鼠标滚轮切换页面，类似于纵向走马灯、满屏滚动相关推荐

html鼠标滑轮换图片,JavaScript实现鼠标滚轮控制页面图片切换
鼠标上的滚轮是一个不错的东东,为什么这么说,因为它能帮助我们快速的浏览网页,快速的进行长篇文章的阅读.对于web前端的我们来说又怎么能不注重这个鼠标滚轮呢,那么它能如何让用户更好的浏览网页呢?本文主要 ...
按住 ctrl 并滚动鼠标滚轮才可缩放地图_Firefox 73 将引入全局缩放功能，在所有网站都可适用...
Firefox 好久都没有用过了,刚刚无意中刷到又有新版本更新了(Firefox 73),好像很厉害的样子分享给大家. Firefox 用户可能很快就能在浏览器中为所有网站设置全局缩放级别.目前,用户 ...
爬虫Spider 08 - chromedriver设置无界面模式 | selenium - 键盘操作 | 鼠标操作 | 切换页面 | iframe子框架 | scrapy框架
文章目录 Spider 07回顾 cookie模拟登陆三个池子 selenium+phantomjs/chrome/firefox Spider 08 笔记 chromedriver设置无界面模式 ...
按住 ctrl 并滚动鼠标滚轮才可缩放地图_ZBrush自定义缩放快捷键
ZBrush默认的缩放方式简直反人类--按住Alt,拖动鼠标(此时可以移动视角),再松开Alt,继续拖动鼠标,才能进行视角缩放.(设计者鼠标滚轮坏了?) 一开始我以为这是没法修改的,网上也没找到方法, ...
vue移动端下拉切换页面_Vue实现移动端页面切换效果
找了好多博客实现效果都--emmm-- 应用Vue自带的过渡 < 进入/离开 & 列表过渡 >和嵌套路由和 fixed定位实现其实还是挺简单的. 在子页面把整个页面做绝对定位 ...
Vue实现底部导航栏切换页面及图片
前言刚进新公司,有幸接触到从前后端不分离到前后端分离的一个过程,最开始对vue不太熟悉,下班自学一周就开始做了,可能会有很多问题,若有写不好的地方大佬们可以提出. 一.实现效果需求:vue底部导航 ...
麒麟系统鼠标滚轮不能实现页面滚动
刚用麒麟V10,发现有滚动条的页面,滚动鼠标滚轮不能控制页面滚动.修改"设置"-"设备"-"鼠标"-"滚轮速度",设置个 ...
如何在HTML5页面中使用鼠标滚轮事件
支持鼠标滚轮可以为HTML5网页增加更多的交互性.不仅是滚动页面,您还可以执行不同的操作,如放大或缩小. 查看鼠标滚轮演示页面- 大多数的浏览器都支持元素的"mousewheel" ...
macOS下鼠标滚轮慢速滚动不起作用的问题解决
在macOS下,如果鼠标滚轮滚动的比较慢,会发现滚轮似乎不起作用,要滚动的快一些才起作用.这是因为macOS只针对触摸板的滚动做了优化,而对鼠标滚轮的支持有问题,解决办法是安装SmoothScroll ...

vue实现滚动鼠标滚轮切换页面，类似于纵向走马灯、满屏滚动

vue实现滚动鼠标滚轮切换页面，类似于纵向走马灯、满屏滚动相关推荐

最新文章

热门文章