vue监听滚动事件实现滚动监听

作者: 果汁密码 | 来源:发表于2017-08-26 21:33 被阅读1767次

在vue中实现滚动监听和原生js差不多

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.4.1/vue.js"></script>
    <style type="text/css">
    #app {
        width: 100%;
        height: 2000px;
    }
    </style>
</head>
<div id="app"></div>

<body>
    <!-- vue监听滚动事件 -->
    <script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                scroll: ''
            }
        },
        methods: {
            scrollDs() {
                this.scroll = document.body.scrollTop;
                console.log(this.scroll)
            }
        },
        mounted() {
            window.addEventListener('scroll', this.scrollDs)
        },
    })
    </script>
</body>

</html>