Vue监听滚动条事件 点击回到顶部

简介: Vue监听滚动条事件 点击回到顶部

监听滚顶条事件:

created () {
    this.listenerFunction();
},
beforeDestroy () {
    document.removeEventListener("scroll", this.listenerFunction);
},
method () {
    listenerFunction(e) {
        document.addEventListener('scroll', this.handleScroll, true);
    }),
    handleScroll () {
        console.log(window.pageYOffset)
    }
}

点击回顶部:

backTop() { //点击回顶部

            // document.body.scrollTop = 0;
            // document.documentElement.scrollTop = 0;
            $('html').stop().animate({
                scrollTop: 0
            }, 1000)
        },
        ```
无动画:
window.scrollTo(x-coord, y-coord); 
相关文章
|
7月前
|
JavaScript API
vue使用hook:声明周期来监听子组件的声明周期
本文介绍了如何在Vue中使用生命周期钩子来监听子组件的生命周期事件,包括在子组件内部监听和在父组件中监听子组件的生命周期钩子。
83 0
|
6月前
|
JavaScript 开发者
|
7月前
|
JavaScript
在 Vue.js 中使用 watch 来监听对象属性的变化
在 Vue.js 中使用 watch 来监听对象属性的变化
|
6月前
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
101 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
6月前
|
缓存 JavaScript
|
6月前
|
JavaScript
vue3,使用watch监听props中的数据
【10月更文挑战第3天】
2775 2
|
7月前
|
JavaScript 前端开发
vue-day03 v-on事件处理,表单输入绑定
文章介绍了Vue.js中事件处理和表单输入绑定的使用。包括v-on指令监听事件、事件处理方法、内联处理器、访问原生DOM事件、事件修饰符、按键修饰符、系统修饰符、exact修饰符和鼠标按钮修饰符。同时,讲解了如何使用v-model实现单行文本、多行文本、复选框和单选按钮的双向数据绑定,并提供了修饰符的使用示例。这些特性使得Vue.js在处理表单输入和事件时更加灵活和方便。
vue-day03 v-on事件处理,表单输入绑定
|
7月前
|
JavaScript
Vue在子组件中判断父组件是否传来事件
本文介绍了在Vue中如何通过`vm.$listeners`对象来判断父组件是否传递了特定的事件给子组件,并展示了如何检查事件是否存在以及相应的处理方法。
323 0
Vue在子组件中判断父组件是否传来事件
|
6月前
|
JavaScript
Vue组件点击事件不触发的问题,添加事件修饰符native解决
Vue组件点击事件不触发的问题,添加事件修饰符native解决
652 0
|
7月前
|
开发框架 JavaScript 前端开发
手把手教你剖析vue响应式原理,监听数据不再迷茫
该文章深入剖析了Vue.js的响应式原理,特别是如何利用`Object.defineProperty()`来实现数据变化的监听,并探讨了其在异步接口数据处理中的应用。