自定义组件如何优雅的监听页面的滚动事件?
发布于 6 年前 作者 ptao 9702 次浏览 来自 官方Issues

如题,请各位集思广益,谢谢!

3 回复

做个广播吧。。。

正好我最近也在做类似的案例,先说一下我的做法:

首先在父页面中使用:onPageScroll()监听滚动的时间,

然后在父页面定义一个状态,将onPageScroll()事件中获取到的数据setDate给刚定义的状态,

其次在父页面wxml中传值给子组件

最后在子组件接收传递过来的数据就可以了。

当父页面发生滚动的时候触发状态的更新,从而使传递到子组件的数据也回跟着更新,通过这个数据的变动可以得知父组件触发了滚动。

简单点来说就是:监听父页面的滚动状态,使用数据设置给父页面的状态中(可以是距离页面顶部的距离:e.scrollTop),通过父传子参数,在子组件接收这个参数,并且监听这个参数是否发生了变化即可。

(下图的是,子组件接收父页面参数的写法,observer是检测参数是否发生变化的事件)。

我的思路大致是这样,希望能够帮助到你。

1.封装一个BasePage,BasePage 支持 onPageScroll 事情,默认不支持订阅。

2.页面继承 BasePage,需要监听滚动的就进行订阅。

相当于每个页面都具备这样的能力,如果需要直接订阅,不需要就不订阅

回到顶部