持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第17天

vue项目下拉到指定高度显示元素功能实现中遇到的问题及替代方案

思路是监听滚动事件，判断当前滚动的距离，与指定高度比较，若大于该高度，则显示组件，若小于高度，则隐藏。

在这里做组件的指定高度隐藏与显示的功能时遇到两个问题，在这里记录一下

我遇到的第一个问题：

监听滚动事件的对象是window，在mounted生命周期函数中进行监听，但之后访问不到保存下来的高度信息

mounted(){
        window.onscroll = function(){
            this.scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop
            this.beforeHeight = 
                document.getElementsByClassName('home-nav')[0].offsetHeight + 
                document.getElementsByClassName('scrollUse')[0].offsetHeight +
                document.getElementsByClassName('featureView')[0].offsetHeight +
                document.getElementsByClassName('featureView')[1].offsetHeight - 44;
        }
    },

经过调试后才发现犯了一个很低级的错误：window.onscoll监听的函数中，this指向的是window对象，而不是组件，所以在computed中无法通过this获取高度信息

我遇到的第二个问题：

接第一个问题之后，将高度信息在methods或computed中通过window.info获取，赋值给data域的属性，但无法实现响应监听，v-if/v-show无相应监听

改变思路，在window.onscroll中判断，通过操作dom对象的方式进行隐藏与显示

mounted(){
        window.onscroll = function(){
            this.scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop
            this.beforeHeight = 
                document.getElementsByClassName('home-nav')[0].offsetHeight + 
                document.getElementsByClassName('scrollUse')[0].offsetHeight +
                document.getElementsByClassName('featureView')[0].offsetHeight +
                document.getElementsByClassName('featureView')[1].offsetHeight - 44;
            if(this.scrollTop < this.beforeHeight){
                document.getElementById('backTop').setAttribute('class','noshow')
            }else{
                document.getElementById('backTop').setAttribute('class','')
            }
        }
    },
        
    //css
.noshow{
    display: none;
}

至此，功能可以实现，但这种解法个人认为不是最优解，通常情况vue中应尽量少绕过vue方法直接操作dom对象，但这里还未找到更好的替代方案，先在这里埋个坑，后续再进行学习，找到好的方案后再来填坑！