当前位置：公众IT > 技术文章 > 自定义组件如何优雅的监听页面的滚动事件？

自定义组件如何优雅的监听页面的滚动事件？

新闻来源：互联网资料整理发布时间：2023/4/5 16:47:33 共计：4617 浏览

前言：

2021-03-04小编发现微信小程序用户：【ThenMorning】提出了一个关于“自定义组件如何优雅的监听页面的滚动事件？”的问题,在问题中开发者ThenMorning对该问题做了如下阐述：

问题类型：

API和组件:

问题描述：

如题，请各位集思广益，谢谢！

注：以上是微信小程序开发者："ThenMorning"对于本问题的一些阐述，这里做一个引用，我们将实时关注微信小程序助手对该问题提出的解决方案。

解决方案：

【2021-05-19】微信小程序技术运营专员对用户ThenMorning提出的自定义组件如何优雅的监听页面的滚动事件？给予如下回复

在不了解你的需求的前提下我姑且说一下当时我需要这个需求时的处理方法：因为有的页面是一个长列表，随着分页的数据增多或者业务显示增多，页面会被用户滚动到底部，所以需要就提出了一个回到顶部的需求（在页面浮窗）当时这个需求会用在很多长列表页面所以如果在每个需要的页面去写一段业务逻辑就很冗余，所以考虑到封装成组件，但是组件内又没有监听页面的办法。但是我想到了另外的一种实现途径：在组件内部有一个空的view利用绝对定位使其默认放置在屏幕的最上方，通过wx.createIntersectionObserver 监听这个view滚动超出一屏幕或者指定距离时对组件进行显示/隐藏处理。这样一样就抽取了一个公共组件用在了需要的页面，当然这个组件最好放置在所用页面的最外层。不知是否能帮到你