美文网首页
vue-cli 监听scroll事件

vue-cli 监听scroll事件

作者: Darkdreams | 来源:发表于2018-07-19 16:47 被阅读0次

之前的项目做完了,打算学习VUE,自己想了一个滚动到底部加载数据的需求,后来用到了scroll,可能是我的理解不对,v-on:scroll并不能监听到scroll事件。

把写法做个备份,也让自己第二次记一遍。

index.vue

export default{
    data(){
        return{
            newsList: {
                //假数据在这
            }
        }
    },
    mounted () {
        window.addEventListener('scroll', this.scrollTop);     
    },
    methods:{
        scrollTop(){
            let scrollTop = document.documentElement.scrollTop //滚动条的高
            let documentTop = document.body.scrollHeight       //全部内容的高
            let screenHeight = window.screen.availHeight       //当前屏幕的高
            if (scrollTop + screenHeight >= documentTop) {
              //干你想干的事儿
              console.log(this.newsList.resultMap.list)
            }
        }
    }
}
  1. 对象与对象之间,记得使用英文逗号。
  2. 箭头函数获取不到this。

相关文章

网友评论

      本文标题:vue-cli 监听scroll事件

      本文链接:https://www.haomeiwen.com/subject/eabtmftx.html