本文实例为大家分享了vue实现滚动鼠标滚轮切换页面的具体代码，供大家参考，具体内容如下
新项目产品被甲方的要求逼疯了，大概返稿了100+次吧，最后甲方网上找了个他们认为的比较有科技感的模板，让我们照着写，首页就是类似于纵向走马灯，鼠标滚动切换，一次切换一整屏的效果。之前没接触过，写了个简单的demo，仅作为学习笔记。
其实原理很简单，就是把所有页面放在一个div中，然后滚动的时候改变外层div的top即可。
因为滚动条监听事件是实时的，所以要加上节流来防止页面切换太快速，我这控制在1.5s才能切换一页。
其实vue不应该操作dom，应该用数据来渲染虚拟dom，但是有些地方暂时没找到合适的方法，还是用的dom操作。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
<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> |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/Lccccb/article/details/104671115
