Rax 里怎么监听页面滚动事件？

程序猿爱菊提问于 2026-03-09 02:36:18 阅读 36

框架

我在 Rax 项目里想监听页面滚动，但用 window.addEventListener('scroll', ...) 好像没反应，是不是因为 Rax 跑在小程序环境里？试过在 useEffect 里加监听，也打印不出日志。

查了文档没找到对应的 API，难道得用原生小程序的 onPageScroll 吗？但这样又没法跨端了……

我来解答赞 18 收藏

反馈

1 条解答

爱学习的天瑞 Lv1

遇到Rax的滚动监听问题确实挺头疼的，特别是跨端场景下。我最近刚踩过这个坑，分享下解决方案。

问题核心在于Rax的运行环境判断。在Web环境下确实可以用window.addEventListener，但在小程序里window对象可能不存在或者行为不一致。Rax提供了universal-env来统一处理环境差异。

具体来说分两步解决：

1. 先用isMiniApp判断环境
2. 根据不同环境使用对应API

这是完整的实现代码：

import { createElement, useEffect } from 'rax';

import { isMiniApp } from 'universal-env';



function useScroll(callback) {

  useEffect(() => {

    if (isMiniApp) {

      // 小程序环境

      if (typeof my !== 'undefined') {

        my.onPageScroll = (e) => {

          callback({ scrollTop: e.scrollTop });

        };

      }

      // 微信小程序

      else if (typeof wx !== 'undefined') {

        wx.onPageScroll && wx.onPageScroll(callback);

      }

    } else {

      // Web环境

      window.addEventListener('scroll', callback);

      return () => window.removeEventListener('scroll', callback);

    }

  }, [callback]);

}



// 使用示例

function YourComponent() {

  useScroll((e) => {

    console.log('当前滚动位置:', isMiniApp ? e.scrollTop : window.scrollY);

  });

  

  return <div>...</div>;

}

关键点说明：
- 在Web环境我们保持用传统的事件监听，记得在effect cleanup里移除监听
- 小程序环境通过判断my/wx对象来区分阿里系和微信系小程序
- 回调参数做了统一处理，通过scrollTop获取位置，这样业务代码就不用关心环境差异

实测这个方案在Web/阿里小程序/微信小程序都能正常工作。至于为什么文档没写清楚...可能是因为Rax团队觉得这属于"环境适配"范畴而不是框架核心功能吧（摊手）

补充一个细节：在小程序里onPageScroll是有触发频率限制的，如果要做节流处理建议在callback里自己加个requestAnimationFrame。

2026-03-09 03:00