vue实现全屏滚动效果（非fullpage.js）

本文实例为大家分享了vue实现全屏滚动效果（的具体代码，供大家参考，具体内容如下

是什么

网页的一个页面占据一屏的宽高，多个页面上下或者左右拼接在一起。当滑动鼠标滚轮，或点击导航按钮时，可以平滑到对应的页面。

此次只实现鼠标滚动

实现原理

使用mousewheel , DOMMouseScroll(火狐用)监听鼠标滚动事件，当鼠标上下的滚动的时候，当前的页面transformY(屏高)或者transformX(屏宽)

代码实现

HTML

1. <template>
2. <div class="fullPage" ref="fullPage">
3. <div
4. class="fullPageContainer"
5. ref="fullPageContainer"
6. @mousewheel="mouseWheelHandle" //监听鼠标事件
7. @DOMMouseScroll="mouseWheelHandle" // 监听鼠标事件
8. >
9. <div class="section section1">1</div>
10. <div class="section section2">2</div>
11. <div class="section section3">3</div>
12. <div class="section section4">4</div>
13. </div>
14. </div>
15. </template>

JS

1. <script>
2. export default {
3. name: "Home",
4. data() {
5. return {
6. fullpage: {
7. current: 1, // 当前的页面编号
8. isScrolling: false, // 是否在滚动,是为了防止滚动多页，需要通过一个变量来控制是否滚动
9. deltaY: 0 // 返回鼠标滚轮的垂直滚动量，保存的鼠标滚动事件的deleteY,用来判断是往下还是往上滚
10. }
11. };
12. },
13. methods: {
14. next() { // 往下切换
15. let len = 4; // 页面的个数
16. if (this.fullpage.current + 1 <= len) { // 如果当前页面编号+1 小于总个数，则可以执行向下滑动
17. this.fullpage.current += 1; // 页面+1
18. this.move(this.fullpage.current); // 执行切换
19. }
20. },
21. pre() {// 往上切换
22. if (this.fullpage.current - 1 > 0) { // 如果当前页面编号-1 大于0，则可以执行向下滑动
23. this.fullpage.current -= 1;// 页面+1
24. this.move(this.fullpage.current);// 执行切换
25. }
26. },
27. move(index) {
28. this.fullpage.isScrolling = true; // 为了防止滚动多页，需要通过一个变量来控制是否滚动
29. this.directToMove(index); //执行滚动
30. setTimeout(() => { //这里的动画是1s执行完，使用setTimeout延迟1s后解锁
31. this.fullpage.isScrolling = false;
32. }, 1010);
33. },
34. directToMove(index) {
35. let height = this.$refs["fullPage"].clientHeight; //获取屏幕的宽度
36. let scrollPage = this.$refs["fullPageContainer"]; // 获取执行tarnsform的元素
37. let scrollHeight; // 计算滚动的告诉，是往上滚还往下滚
38. scrollHeight= -(index - 1) * height + "px";
39. scrollPage.style.transform = `translateY(${scrollHeight})`;
40. this.fullpage.current = index;
41. },
42. mouseWheelHandle(event) { // 监听鼠标监听
43. // 添加冒泡阻止
44. let evt = event || window.event;
45. if (evt.stopPropagation) {
46. evt.stopPropagation();
47. } else {
48. evt.returnValue = false;
49. }
50. if (this.fullpage.isScrolling) { // 判断是否可以滚动
51. return false;
52. }
53. let e = event.originalEvent || event;
54. this.fullpage.deltaY = e.deltaY || e.detail; // Firefox使用detail
55. if (this.fullpage.deltaY > 0) {
56. this.next();
57. } else if (this.fullpage.deltaY < 0) {
58. this.pre();
59. }
60. }
61. }
62. };
63. </script>

CSS

1. <style scoped>
2. .fullPage{
3. height: 100%;//一定要设置，保证占满
4. overflow: hidden;//一定要设置，多余的先隐藏
5. background-color: rgb(189, 211, 186);
6. }
7. .fullPageContainer{
8. width: 100%;
9. height: 100%;
10. transition: all linear 0.5s;
11. }
12. .section {
13. width: 100%;
14. height: 100%;
15. background-position: center center;
16. background-repeat: no-repeat;
17. }
18. .section1 {
19. background-color: rgb(189, 211, 186);
20. background: url("./assets/intro-bg.jpg");
21. }
22. .section1 .secction1-content {
23. color: #fff;
24. text-align: center;
25. position: absolute;
26. top: 40%;
27. right: 0;
28. left: 0;
29. }
30. .secction1-content h1 {
31. font-size: 40px;
32. padding-bottom: 30px;
33. }
34. .secction1-content p {
35. font-size: 20px;
36. }
37. .section2 {
38. background-color: rgb(44, 48, 43);
39. }
40. .section3 {
41. background-color: rgb(116, 104, 109);
42. }
43. .section4 {
44. background-color: rgb(201, 202, 157);
45. }
46. </style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。