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>

范例效果

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

目标