renderjs里怎么获取页面滚动位置？

码农珊珊提问于 2026-03-16 15:21:20 阅读 67

移动

我在uni-app里用renderjs想监听页面的滚动，但window.pageYOffset在renderjs里好像拿不到实时值。我试过在mounted里读取，结果一直是0，即使页面已经滚下去了。是不是renderjs不能直接访问window对象？还是说H5和App端有区别？

我的代码大概是这样的：

export default {
  mounted() {
    console.log(window.pageYOffset); // 始终是0
  }
}

有没有办法在renderjs里正确拿到当前滚动距离？或者必须通过uni的API传参进来？

uni-app

我来解答赞 12 收藏

反馈

2 条解答

晨羲酱~ Lv1

首先你要明白renderjs的执行环境和普通的页面环境有点不同，它有自己的生命周期和限制。在renderjs里直接访问window对象确实可能拿不到预期的结果，特别是像pageYOffset这种依赖于DOM渲染完成后的值。

一个比较靠谱的方式是利用uni-app提供的onPageScroll事件来获取滚动位置，并且通过props或者emit的方式把数据传递给renderjs模块。下面我给你个具体的做法。

先在你的vue页面组件里这样写：

export default {

  data() {

    return {

      scrollTop: 0 // 这是用来存储滚动距离的变量

    }

  },

  onPageScroll(e) { // 监听滚动事件

    this.scrollTop = e.scrollTop; // 把滚动距离存起来

  }

}

然后在你的renderjs模块里通过props接收这个值：

export default {

  props: ['scrollTop'], // 从父组件接收滚动距离

  mounted() {

    console.log(this.scrollTop); // 这时候就能正确打印出滚动距离了

  }

}

这样做的原因是，onPageScroll事件是由uni-app框架专门处理滚动事件的，它能保证在合适的时机触发，并且能跨平台工作。而直接用window.pageYOffset的话，可能会因为renderjs的执行时机问题导致取到错误的值。顺便说一句，开发过程中这种跨模块的数据传递有时候挺烦人的，不过为了代码的健壮性也没办法，慢慢习惯吧。

2026-03-26 16:03

书生シ婧妍 Lv1

renderjs拿不到pageYOffset是正常的，因为它运行在独立的webview里，访问的window是那个webview的window，不是页面主window。

正确做法是在renderjs外部监听滚动，然后通过通信机制传进去。

普通js层这样写：

export default {

  mounted() {

    uni.onPageScroll((e) => {

      uni.$emit('pageScroll', { scrollTop: e.scrollTop });

    });

  }

}

renderjs层这样接收：

export default {

  mounted() {

    uni.$on('pageScroll', (e) => {

      console.log('滚动位置:', e.scrollTop);

      // 在这里更新renderjs里的数据

      this.scrollTop = e.scrollTop;

    });

  },

  methods: {

    // 直接用this.scrollTop就行

  }

}

另外提醒一下，renderjs的mounted只在webview加载时执行一次，所以外部持续emit进来是必须的。

如果是App端，还可以试试用plus.webview.getWebviewById().setStyle({scrollIndicator:'none'})这类API，但uni.$emit这种跨webview通信方式是最省事的。

2026-03-17 09:02