Vue 获取当前距离屏幕顶部的距离

<template>
    <div ref="obtain"></div>
<template/>

<script>
export default {
    data() {
        return {}
    },
    mounted() {
      // 滚动条的获取
      window.addEventListener('scroll', this.handleScrollx, true)
   },
    methods: {
        handleScrollx() {
          console.log('滚动高度', window.pageYOffset)
          console.log('距离顶部高度', this.$refs.obtain.getBoundingClientRect().top)
        }
    }
}
</ script>

获取当前页面高度

export default {
    data() {
        return {
            // 页面高度
            screenHeight: document.body.clientHeight,
            // 计算出的高度
            PageHeight: ''
        }
    },
    created() {
       this.GetHeight()
    },
    methods: {
        GetHeight() {
            // 根据页面高度计算  (可以自定义逻辑)
            this.PageHeight = (this.screenHeight)
        }
    }
}

 

posted @ 2020-06-12 12:45  皮一皮很开心  阅读(12350)  评论(0编辑  收藏  举报