页面中间显示提示信息,当滚动时消失

在h5页面需要做一个提示信息,当滚动页面时消失,从另一个页面调回来是显示出来
v-if控制显示隐藏 接下来就是事件的控制 在vue项目中

mounted() {
// 监听页面滚动
window.addEventListener(‘scroll’, scroll = () => {
// 通过是否滚动来判断显示和隐藏,不然从别的页面过来不显示,会执行一次这个事件
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
if (scrollTop > 0) {
this.showBtn = false
}
})
},
当离开这个页面时销毁这个事件
beforeDestroy() {
window.removeEventListener(‘scroll’, scroll);
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现在 Vue 2 中当页面滚动到相应组件显示整个组件的效果,你可以结合使用 Vue 的生命周期钩子和原生 JavaScript 的滚动事件。 首先,在你的组件中,添加一个容器元素,例如一个 `<div>`,用于包裹需要显示的整个组件。 然后,在组件的生命周期钩子函数 `mounted` 中,绑定一个滚动事件监听器,用于检测页面滚动。 ```html <template> <div> <!-- 其他内容 --> <div ref="targetComponent" class="target-component"> <!-- 整个组件的内容 --> </div> </div> </template> <script> export default { mounted() { window.addEventListener('scroll', this.handleScroll); }, destroyed() { window.removeEventListener('scroll', this.handleScroll); }, methods: { handleScroll() { const targetComponent = this.$refs.targetComponent; const scrollPosition = window.scrollY + window.innerHeight; const componentPosition = targetComponent.offsetTop; if (scrollPosition >= componentPosition) { // 当页面滚动到相应组件显示整个组件 // 可以在这里修改组件的显示状态或其他操作 } }, }, }; </script> <style> .target-component { display: none; /* 初始状态下隐藏组件 */ } </style> ``` 在 `handleScroll` 方法中,通过比较滚动位置和组件位置来判断是否滚动到相应组件。当滚动到相应组件,你可以在对应的条件下修改组件的显示状态,例如通过操作组件的 CSS 类名或修改数据属性来控制组件的显示和隐藏。 希望这个解决方案对你有帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值