需求介绍

1、滚动吸顶        

要求蓝色框内模块滑动到头部,左侧列表固定,右侧内容块继续滚动

使用window方法 监听滚动事件:window.addEventListener()

参数1:事件类型(click、mousedown、scroll) 

参数2:事件触发后调用函数

参数3:冒泡或捕获(布尔类型)

    mounted() {
        window.addEventListener('scroll', this.handleScroll);
    },
    beforeDestroy() {
        // 最后记得移除事件
        window.removeEventListener('scroll', this.handleScroll);
    },
    methods: {
        handleScroll() {
            //函数处理
        },
    }

2、实现 回到顶部功能 也是可以用 window.addEventListener()

     <div v-if="isTops" id="toppings">
        <img src="@/assets/serviceDesk/topping.png" alt="回到顶部">
     </div>
    
    mounted() {
        window.addEventListener('scroll', this.handleScroll, true)
    },
    beforeDestroy() {
        window.removeEventListener('scroll', this.handleScroll, true)
    },
    methods: {
        handleScroll(e) {

                // isTops :滚动到一定位置 展示回到顶部按钮
                // timer :定时器实现滚动动画回到顶部

            if (e.target.scrollTop > 1200) {
                this.isTops = true
                document.getElementById('toppings').addEventListener('click', function () {
                    var timer = setInterval(function () {
                        e.target.scrollTop = Math.floor(e.target.scrollTop - 5);
                        if (e.target.scrollTop === 0) {
                            clearInterval(timer);
                        }
                    },);
                })
            } else {
                this.isTops = false
            }
        },
    },

GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐