Hummer中滚动事件scroll在页面不触发怎么办？

公孙弯弯提问于 2026-02-14 01:02:33 阅读 95

框架

在用Hummer开发页面时，给scroll-view绑定了v-on:scroll="handleScroll"，但滚动时方法完全没反应。尝试过设置scroll-y="true"和enable-scroll-anchoring="true"，滚动条也能正常出现，就是监听不到事件…

代码大概是这样写的：

<template>
  <scroll-view class="content" scroll-y="true" v-on:scroll="handleScroll">
    <view>内容区域</view>
  </scroll-view>
</template>

<script>
export default {
  methods: {
    handleScroll() {
      console.log('滚动了！'); // 这里从来没输出
    }
  }
}
</script>

查看文档说是需要设置某些属性，但试了各种组合都不行，求问正确的滚动事件监听姿势是怎样的？

我来解答赞 5 收藏

反馈

1 条解答

司徒佳润 Lv1

这个问题其实挺常见的，很多开发者在用 Hummer 的时候都会遇到类似的困惑。咱们一步步来解决。

首先你要明白，Hummer 的 scroll-view 组件的滚动事件并不是直接绑定到原生 DOM 事件上的，而是通过框架内部封装的一个机制触发的。这就意味着你可能需要按照它的特定方式来设置，才能正确监听到滚动事件。

第一步，确认你的 scroll-view 的属性设置是否正确。根据你的描述，scroll-y="true" 已经设置了，这个是对的，因为只有开启纵向滚动，滚动事件才会生效。但还有一个重要的属性叫 enable-scroll-event，这个属性必须显式设置为 true，否则滚动事件是不会被触发的。

第二步，修改你的代码，把 enable-scroll-event 加上去，完整的代码结构应该是这样的：

<template>

  <scroll-view 

    class="content" 

    scroll-y="true" 

    enable-scroll-event="true" 

    v-on:scroll="handleScroll">

    <view>内容区域</view>

  </scroll-view>

</template>



<script>

export default {

  methods: {

    handleScroll(event) {

      // event 是滚动事件对象，可以打印出来看看具体有哪些信息

      console.log('滚动了！', event);

    }

  }

}

</script>

注意这里我加了一个 event 参数给 handleScroll 方法，因为滚动事件会传递一个事件对象，里面包含了滚动的相关信息，比如滚动位置等。你可以打印出来看看具体的数据结构。

第三步，检查样式问题。有时候即使属性设置对了，滚动事件还是不触发，可能是因为内容的高度不足以触发滚动。你需要确保 scroll-view 内部的内容高度大于 scroll-view 自身的高度。比如可以这样设置样式：

.content {

  height: 100vh; /* 让 scroll-view 占满整个屏幕高度 */

}



.content view {

  height: 200vh; /* 让内容高度超过 scroll-view 的高度 */

}

这样就能保证滚动条一定会出现，事件也能正常触发。

最后说一下原理。Hummer 的 scroll-view 是基于原生滚动容器封装的，但它并不是直接监听原生的 DOM 滚动事件，而是通过框架内部的事件代理机制来触发滚动回调。所以如果你没有设置 enable-scroll-event="true"，框架不会主动派发滚动事件，这就是为什么你的方法一直没被调用的原因。

总结一下：
1. 确保 scroll-y="true" 和 enable-scroll-event="true" 都设置好了。
2. 确保内容高度大于容器高度，这样才能触发滚动。
3. 在回调方法里接收 event 参数，方便调试和获取滚动信息。

按照这些步骤操作，应该就能解决问题了。如果还有问题，可以再补充更多细节，咱们继续排查。

2026-02-14 13:02