利用vue怎么实现一个鼠标切换页面功能?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
原理很简单,就是把所有页面放在一个div中,然后滚动的时候改变外层div的top即可。
因为滚动条监听事件是实时的,所以要加上节流来防止页面切换太快速,我这控制在1.5s才能切换一页。
其实vue不应该操作dom,应该用数据来渲染虚拟dom,但是有些地方暂时没找到合适的方法,还是用的dom操作。
<template> <div id="wrap" :> <div id="main" :> <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 id="page1" class="page"></div> <div id="page2" class="page"></div> <div id="page3" class="page"></div> <div id="page4" class="page"></div> <div id="page5" class="page"></div> </div> </div> </template> <script> export default { name: 'Home', data(){ return{ screenWeight: 0, // 屏幕宽度 screenHeight: 0, // 屏幕高度 index: 1, // 用于判断翻页 curIndex: 1, // 当前页的index startTime: 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>
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注亿速云行业资讯频道,感谢您对亿速云的支持。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。