景点详情页
设置v-show来决定画廊组件是否出现,并且绑定图片的点击事件。
methods: {handleBannerClick () {this.showGallery = true}
}
由于使用了keep-alive,所以在activated()中绑定监听事件,当滑动事件发生时,调用handleScroll()函数:
methods: {handleScroll () {const top = document.documentElement.scrollTopif (top > 60) {this.showAbs = false} else {this.showAbs = true}}},activated () {window.addEventListener('scroll', this.handleScroll)}
:style="opacityStyle"
opacityStyle: {opacity: 0
}
3.当滑动距离在60-140之间时,设置渐隐渐现效果,当距离超过140时,opacity设为1:
handleScroll () {const top = document.documentElement.scrollTopif (top > 60) {let opacity = top / 140opacity = opacity > 1 ? 1 : opacitythis.opacityStyle = { opacity }this.showAbs = false} else {this.showAbs = true}}
在上面的Header.vue组件中使用了全局事件
activated () {window.addEventListener('scroll',this.handleScroll)
}
上面的代码不止在详情页面中会触发,而且在其他页面也会触发,因为这是一个全局事件,所以这里我们需要使用对这个全局事件进行解绑
activated () {window.addEventListener('scroll', this.doScroll)
}// 页面被隐藏或者页面被替换成新的组件时触发的deactivated () {veEventListener('scroll',this.handleScroll)}
本文发布于:2024-01-29 07:22:07,感谢您对本站的认可!
本文链接:https://www.4u4v.net/it/170648413213644.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
留言与评论(共有 0 条评论) |