AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

vue 组件封装 | s-fullpage 全屏滚动 （内含绑定鼠标滑轮滚动事件、避免鼠标滑轮连续滚动、滑动过渡动画等实用技巧）

2024-07-01 102
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： vue 组件封装 | s-fullpage 全屏滚动 （内含绑定鼠标滑轮滚动事件、避免鼠标滑轮连续滚动、滑动过渡动画等实用技巧）

目标

实现类似插件 vue-fullpage.js 的全屏滚动翻页效果（ vue-fullpage.js 的教程详见 https://blog.csdn.net/weixin_41192489/article/details/111104443）

实现原理（要点）

1. 使用 “子绝父相” 定位，实现上下滑动过渡动画翻页（滑动动画的实现原理，详见 https://blog.csdn.net/weixin_41192489/article/details/112271981 ）

2. 通过插槽获取页面列表，根据下标变化完成翻页

this.$slots.default.forEach(item => {
    this.pageList.push(item.componentOptions.propsData.page)
})
this.currentPage = this.pageList[this.currentIndex]

3. 绑定鼠标滑轮滚动事件，通过限定事件触发时间间隔，来避免连续滚动触发越级翻页

@wheel.prevent="mouseWheel"
// 鼠标滑轮滚动事件
mouseWheel(e) {
   this.startTime = new Date().getTime()
   // 每次滚动事件触发1s后，才会再次触发（避免鼠标滚动事件连续触发）
   if (this.startTime - this.endTime > 1000) {
        ……  // 执行翻页事件,翻页完成后，执行 this.endTime = new Date().getTime()
   }
}

4. 通过监听下标变化来切换向上翻页和向下翻页的过渡动画

watch: {
    '$parent.currentIndex'(newIndex, oldindex) {
        if (newIndex >= oldindex) {
            // 向下翻页时，使用向下翻页的动画，默认为从下方滑入，从上方滑出
            this.inClass = this.nextInClass
            this.outClass = this.nextOutClass
        } else {
            // 向上翻页时，使用向上翻页的动画，默认为从上方滑入，从下方滑出
            this.inClass = this.previousInClass
            this.outClass = this.previousOutClass
        }
    }
},

完整代码 s-fullpage 和 s-fullpageItem

全屏滚动通过封装 父组件 s-fullpage 和 子组件 s-fullpageItem 来配合实现

s-fullpage.vue

<template>
    <div @wheel.prevent="mouseWheel" class="fullpage">
        <!--指示器-->
        <div class="fixed__indicatorsBox" :style="indicatorsBoxStyle">
            <div @click="goto(index)" :class="{'active_indicator':currentIndex === index}" class="indicator"
                 v-for="(item,index) in pageList" :key="index">
            </div>
        </div>
        <slot></slot>
    </div>
</template>
<script>
    export default {
        name: "s-fullpage",
        props: {
            // 默认显示页
            activePage: String,
            // 指示器的位置
            indicatorPosition: {
                type: String,
                default: 'right'
            }
        },
        mounted() {
            if (this.indicatorPosition === 'right') {
                this.$set(this.indicatorsBoxStyle, 'right', 0)
            } else if (this.indicatorPosition === 'left') {
                this.$set(this.indicatorsBoxStyle, 'left', 0)
            }
            this.$slots.default.forEach(item => {
                this.pageList.push(item.componentOptions.propsData.page)
            })
            if (!this.activePage && this.pageList.length > 0) {
                this.currentPage = this.pageList[0]
            } else {
                this.currentPage = this.activePage
                this.pageList.forEach((item, index) => {
                    if (this.currentPage === item) {
                        this.currentIndex = index
                    }
                })
            }
        },
        data() {
            return {
                indicatorsBoxStyle: {},
                // 所有页构成的列表
                pageList: [],
                // 当前显示页
                currentPage: '',
                // 当前显示页的下标
                currentIndex: 0,
                // 鼠标滑轮滚动的方向
                direction: '',
                // 鼠标滑轮事件开始时间
                startTime: '',
                // 鼠标滑轮指令执行结束时间
                endTime: '',
            }
        },
        methods: {
            // 页面跳转
            goto(index) {
                this.currentIndex = index
                this.currentPage = this.pageList[index]
            },
            // 鼠标滑轮滚动事件
            mouseWheel(e) {
                this.startTime = new Date().getTime()
                // 每次滚动事件触发1s后，才会再次触发（避免鼠标滚动事件连续触发）
                if (this.startTime - this.endTime > 1000) {
                    e = e || window.event;
                    if (e.wheelDelta) {  //IE，谷歌浏览器滑轮事件
                        if (e.wheelDelta > 0) {
                            // 向上滚动
                            this.previousPage()
                        }
                        if (e.wheelDelta < 0) {
                            // 向下滚动
                            this.nextPage()
                        }
                    } else if (e.detail) {  //Firefox滑轮事件
                        if (e.detail > 0) {
                            // 向上滚动
                            this.previousPage()
                        }
                        if (e.detail < 0) {
                            // 向下滚动
                            this.nextPage()
                        }
                    }
                }
            },
            previousPage() {
                this.direction = 'up'
                this.currentIndex -= 1
                // 第1页时，禁止继续向上翻页
                if (this.currentIndex < 0) {
                    this.currentIndex = 0
                }
                this.currentPage = this.pageList[this.currentIndex]
                this.endTime = new Date().getTime()
            },
            nextPage() {
                this.direction = 'down'
                this.currentIndex += 1
                // 最后一页时，禁止继续向下翻页
                if (this.currentIndex > this.pageList.length - 1) {
                    this.currentIndex = this.pageList.length - 1
                }
                this.currentPage = this.pageList[this.currentIndex]
                this.endTime = new Date().getTime()
            },
        }
    }
</script>
<style scoped>
    /*指示器容器的样式*/
    .fixed__indicatorsBox {
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        z-index: 999;
    }
 
    /*指示器的样式*/
    .indicator {
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background: white;
        opacity: 0.3;
        margin: 10px;
        cursor: pointer;
    }
 
    /*当前指示器的样式*/
    .active_indicator {
        opacity: 1;
        box-shadow: 0px 0px 8px 2px white;
    }
 
    .fullpage {
        height: 100vh;
        width: 100vw;
        color: white;
        background: black;
        position: relative;
        /*隐藏滚动条*/
        overflow: hidden;
    }
 
    /*滑出——从上方*/
    .slidOutFromTop {
        animation: slidOutFromTop 1s;
    }
 
    @keyframes slidOutFromTop {
        from {
            top: 0;
        }
        to {
            top: -100%;
        }
    }
 
    /*滑出——从下方*/
    .slidOutFromBottom {
        animation: slidOutFromBottom 1s;
    }
 
    @keyframes slidOutFromBottom {
        from {
            top: 0;
        }
        to {
            top: 100%;
        }
    }
 
 
    /*滑入——从上方*/
    .slidInFromTop {
        animation: slidInFromTop 1s;
    }
 
    @keyframes slidInFromTop {
        from {
            top: -100%;
        }
        to {
            top: 0;
        }
    }
 
    /*滑入——从下方*/
    .slidInFromBottom {
        animation: slidInFromBottom 1s;
    }
 
    @keyframes slidInFromBottom {
        from {
            top: 100%;
        }
        to {
            top: 0;
        }
    }
</style>

s-fullpageItem.vue

<template>
    <transition
            :enter-active-class="inClass"
            :leave-active-class="outClass"
    >
        <div v-show="$parent.currentPage === page" class="s_fullpageItem">
            <slot></slot>
        </div>
    </transition>
</template>
<script>
    export default {
        name: "s-fullpageItem",
        props: {
            // 页面标识，必传且不能与其他页重复！
            page: {
                type: String,
                required: true
            },
            nextInClass: {
                type: String,
                default: 'slidInFromBottom'
            },
            nextOutClass: {
                type: String,
                default: 'slidOutFromTop'
            },
            previousInClass: {
                type: String,
                default: 'slidInFromTop'
            },
            previousOutClass: {
                type: String,
                default: 'slidOutFromBottom'
            },
        },
        watch: {
            '$parent.currentIndex'(newIndex, oldindex) {
                if (newIndex >= oldindex) {
                    // 向下翻页时，使用向下翻页的动画，默认为从下方滑入，从上方滑出
                    this.inClass = this.nextInClass
                    this.outClass = this.nextOutClass
                } else {
                    // 向上翻页时，使用向上翻页的动画，默认为从上方滑入，从下方滑出
                    this.inClass = this.previousInClass
                    this.outClass = this.previousOutClass
                }
            }
        },
        data() {
            return {
                inClass: '',
                outClass: '',
            }
        },
    }
</script>
<style scoped>
    .s_fullpageItem {
        position: absolute;
        height: 100vh;
        width: 100vw;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }
 
    /*滑出——从上方*/
    .slidOutFromTop {
        animation: slidOutFromTop 1s
    }
 
    @keyframes slidOutFromTop {
        from {
            top: 0;
        }
        to {
            top: -100%;
        }
    }
 
    /*滑出——从下方*/
    .slidOutFromBottom {
        animation: slidOutFromBottom 1s
    }
 
    @keyframes slidOutFromBottom {
        from {
            top: 0;
        }
        to {
            top: 100%;
        }
    }
 
 
    /*滑入——从上方*/
    .slidInFromTop {
        animation: slidInFromTop 1s
    }
 
    @keyframes slidInFromTop {
        from {
            top: -100%;
        }
        to {
            top: 0;
        }
    }
 
    /*滑入——从下方*/
    .slidInFromBottom {
        animation: slidInFromBottom 1s
 
    }
 
    @keyframes slidInFromBottom {
        from {
            top: 100%;
        }
        to {
            top: 0;
        }
    }
</style>

使用范例

<template>
    <div>
        <s-fullpage activePage="2" indicatorPosition="left">
            <s-fullpageItem page="1" >第1页</s-fullpageItem>
            <s-fullpageItem page="2" style="background: blue">第2页</s-fullpageItem>
            <s-fullpageItem page="3" style="background: green">第3页</s-fullpageItem>
        </s-fullpage>
    </div>
</template>

范例效果

 

文章标签：
JavaScript
关键词：
绑定事件VUE.js
vue绑定事件VUE.js
vue动画VUE.js
动画VUE.js
事件VUE.js
朝阳39
目录
相关文章
我是快乐的嘟嘟
|
5天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking？
通过以上针对 Webpack 或 Rollup 的配置方法，就可以在 Vue 项目中有效地启用 Tree Shaking，从而优化项目的打包体积，提高项目的性能和加载速度。在实际配置过程中，需要根据项目的具体情况和需求，对配置进行适当的调整和优化。
我是快乐的嘟嘟
61 26
html的七十二变
|
5天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中，合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法，有效提升应用的响应性和可维护性。
html的七十二变
17 7
游客ady5kpv352g3u
|
4天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客！我是一名自学了2年半前端的大一学生，熟悉JavaScript与Vue，目前正在向全栈方向发展。如果你从我的博客中有所收获，欢迎关注我，我将持续更新更多优质文章。你的支持是我最大的动力！🎉🎉🎉
游客ady5kpv352g3u
13 3
游客ady5kpv352g3u
|
4天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客！我是瑞雨溪，一名热爱JavaScript和Vue的大一学生。自学前端2年半，熟悉JavaScript与Vue，正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等，希望能对你有所帮助。关注我，持续更新中！🎉🎉🎉
游客ady5kpv352g3u
12 2
姜白告
|
前端开发 JavaScript
初识 Vue（24）---（Vue 中同时使用过渡和动画）
Vue 中同时使用过渡和动画 在上篇博客 《Vue 中使用 animate.css 库》基础上开始这篇博客 在上篇博客中，完成了 引入 animate.
姜白告
1237 0
恍惚的二狗
|
前端开发 内存技术
Vue_同时使用过渡和动画
在上一节我们用animate动画库，在刷新页面时没有动画 如何解决第一次就显示动画内容呢？ 在transform 上加上appear 和appear-active-class <transition name='fade' appear enter-active-class='animate.
恍惚的二狗
1565 0
html的七十二变
|
5天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时，性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题，并提供了优化建议，帮助开发者提高应用性能。
html的七十二变
23 8
html的七十二变
|
5天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化，但使用场景不同。`computed` 用于计算属性，依赖于其他数据自动更新；`watch` 用于监听数据变化，执行异步或复杂操作。
html的七十二变
21 5
html的七十二变
|
6天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法，包括 props、事件、Vuex 状态管理等，帮助开发者选择最适合项目需求的通信方式，提高开发效率和代码可维护性。
html的七十二变
20 5
html的七十二变
|
6天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中，不同组件之间传递数据和事件的方法。常用的方式有：props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
html的七十二变
17 4