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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持我們。