我想的是,在每一个路由中注册个scroll方法,在根组件滚动时会触发当前路由中的scroll,然后在这个方法中执行当前路由的业务逻辑
React能不能根组件加一个滚动监听,然后分发到每一个路由中去
MouCai
#2
方案一: 弄一个类似这种的组建,放到需要用到的 View 中去
class Loadmore extends React.PureComponent {
componentDidMount() {
const { targetNode } = this.props;
targetNode.addEventListener('scroll', this.listener);
}
componentWillUnmount() {
const { targetNode } = this.props;
targetNode.removeEventListener('scroll', this.listener);
}
listener = throttle((e) => {
if (!this.props.isActive) {
return;
}
const target = e.target;
const scrollBottom = target.scrollTop + target.clientHeight;
const offsetBotton = target.scrollHeight - scrollBottom;
if (offsetBotton <= this.props.offset) {
this.props.onLoad(e);
}
}, 200, {
trailing: true,
})
render() {
return null;
}
}
方案二,弄个类似上边那种的高阶组建,包裹需要监听 scroll 的组件
方案三,在根组件中放置一个类似方案一的组件,在监听到滚动的时候触发 redux action ,把需要记录额滚动信息作为 payload 丢进 state 然后在需要的组件中取用