javascript - vuejs on scroll 修复侧边栏,
问题描述
<div class="col-sm-4 my-orders-order-now">
<div :class="{ fixed: fixedOrderPanel }">
<FixedPannel />
</div>
</div>
data () {
return {
orders: [],
loading: false,
fixedOrderPanel: false
}
},
mounted () {
this.getJokes()
if (window !== undefined && window.addEventListener) {
window.addEventListener('scroll',() => this.handleScroll(window.scrollY));
}
},
destroyed: function () { //Not working
console.log('Afore')
if (window !== undefined && window.removeEventListener) {
window.removeEventListener('scroll',
()=>this.handleScroll(window.scrollY));
}
},
methods: {
handleScroll: function(scrolled){
console.log('scrolling')
if (scrolled > 160) {
this.fixedOrderPanel = true
} else {
this.fixedOrderPanel = false
}
},
}
window.removeEventListener
在销毁/组件或路由更改 vuejs 后,滚动侦听器仍然完好无损。window.removeEventListener
即使我尝试了这两种beforeDestroy()
方法和销毁方法来删除滚动事件侦听器,也无法在更改路由或组件时工作。
解决方案
<div class="col-sm-4 my-orders-order-now">
<div :class="{ fixed: fixedOrderPanel }">
<FixedPannel />
</div>
</div>
components: {
FixedPannel
},
mounted () {
this.getJokes()
document.addEventListener('scroll', this.handleScroll);
},
destroyed: function () {
document.removeEventListener('scroll', this.handleScroll);
},
methods: {
handleScroll: function(){
const checkWindow = window !== undefined && window.scrollY;
if (checkWindow && window.scrollY > 160) {
this.fixedOrderPanel = true
} else {
this.fixedOrderPanel = false
}
const scrollFix = (scrolled) => {
if (scrolled > 160) {
this.fixedOrderPanel = true
} else {
this.fixedOrderPanel = false
}
}
}
}
<style>
.fixed{
position: fixed;
top: 0px;
padding: 1%;
}
</style>
推荐阅读
- angular - npm run build 在多个环境中没有提及指定环境
- wordpress - wordpress 子域导致主域
- mysql - 如果一列的值基于过去时间和另一列的值,如何设计数据库
- android - 操作栏可以包含 PagerSlidingTabStrip 吗?
- asp.net - 如何在 ASP.Net 中使用 DataReader 和 GridView
- java - 承载 SurfaceView 的片段仅在 Canvas 上绘制一次
- naudio - NAudio:如何在使用 AudioFileReader 和 WaveOutEvent 更改播放位置时准确获取当前播放位置
- android - Android 材料 - 无法转换为 com.google.android.material.chip.ChipGroup
- reactjs - 在反应打字稿中使用锚组件时如何打开特定的折叠手风琴
- rxjs - rxjs。在订阅方法中有代码是一种好习惯吗?