问题:第一次加载项目时,可以正常显示天花板效果,但是刷新页面时,没有created(){this.getDestruction()this.watchScroll()window.addEventListener("scroll",这个.watchScroll);},asyncmounted(){awaitthis.getMarket();//console.log('this.turnover',this.burn)this.drawLine();//事件监听器scrollbar},destroyed(){//移除事件监听器window.removeEventListener("scroll",this.watchScroll);window.removeEventListener("滚动",this.handleClick);},methods:{watchScroll(){//滚动距离varscrollTop=window.pageYOffset||文档.documentElement.scrollTop||文档.body.scrollTop;//容器的高度varoffsetTop=document.querySelector("#headtitle_bg").offsetHeight;//如果滚动距离大于元素到顶部If(scrollTop>offsetTop){this.navBarFixed=true;}else{this.navBarFixed=false;}},}天花板效果在天花板之前消失。原因:获取不到#headtitle_bg节点方法:使用nextTick()方法延迟回调函数,直到下一次dom更新newdata后调用,简单理解就是:当dom中有数据更新和渲染时,自动执行该函数,Vue.nextTick()回调函数中的执行要对DOM进行操作。修改后的代码"滚动",this.watchScroll);})},asyncmounted(){//console.log(this.$refs.To_Repurchase_VNC)awaitthis.getMarket();//console.log('this.turnover',this.burn)this.drawLine();//事件监听器scrollbar},destroyed(){//移除事件监听器window.removeEventListener("scroll",this.watchScroll);window.removeEventListener("滚动",this.handleClick);},methods:{watchScroll(){//滚动距离varscrollTop=window.pageYOffset||文档.documentElement.scrollTop||文档.body.scrollTop;//容器高度varoffsetTop=document.querySelector("#headtitle_bg").offsetHeight;//如果滚动距离大于元素到顶部的距离,则实现吸顶效果(scrollTop>offsetTop){this.navBarFixed=true;}else{this.navBarFixed=false;}},}
