个人中心
gpt4 book ai didi

vue实现滚动鼠标滚轮切换页面

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 31 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章vue实现滚动鼠标滚轮切换页面由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

本文实例为大家分享了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}" >&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,      // 当前页的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 。

最后此篇关于vue实现滚动鼠标滚轮切换页面的文章就讲到这里了,如果你想了解更多关于vue实现滚动鼠标滚轮切换页面的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

31 4 0
文章推荐： vue实现两个区域滚动条同步滚动
文章推荐： 关于C++内部类的介绍与使用示例
文章推荐： SEO常用的12个搜索引擎指令
文章推荐： C++中new和delete的介绍
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com