本文实例为大家分享了vue实现滚动鼠标滚轮切换页面的具体代码,供大家参考,具体内容如下
新项目产品被甲方的要求逼疯了,大概返稿了100+次吧,最后甲方网上找了个他们认为的比较有科技感的模板,让我们照着写,首页就是类似于纵向走马灯,鼠标滚动切换,一次切换一整屏的效果。之前没接触过,写了个简单的demo,仅作为学习笔记。
其实原理很简单,就是把所有页面放在一个div中,然后滚动的时候改变外层div的top即可。
因为滚动条监听事件是实时的,所以要加上节流来防止页面切换太快速,我这控制在1.5s才能切换一页。
其实vue不应该操作dom,应该用数据来渲染虚拟dom,但是有些地方暂时没找到合适的方法,还是用的dom操作。
<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, // 当前页的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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
桃源资源网 Design By www.nqtax.com
暂无“vue实现滚动鼠标滚轮切换页面”评论...