Kraken框架中滚动事件监听失效怎么办?

国娟(打工版) 阅读 57

在用Kraken开发移动端列表时,给scroll-view绑定了scroll事件但一直没触发,代码检查了好几遍都没发现问题:


// 在mounted钩子中绑定
this.$el.querySelector('.list-container').addEventListener('scroll', () => {
  console.log('滚动了!'); // 这里根本没输出
});

已经确认容器设置了固定高度且内容确实能滚动,还试过用scrolltoupper事件名也不行,控制台也没报错,到底是哪里出问题了?

我来解答 赞 8 收藏
二维码
手机扫码查看
1 条解答
司徒树萱
Kraken框架里确实容易踩坑,特别是滚动事件这块。你这个情况我之前也遇到过,大概率是scroll-view组件本身的机制导致原生滚动事件监听不了。Kraken为了兼容性把滚动事件做了代理,不能直接用addEventListener绑定。

你可以试试用Kraken封装好的方法来监听滚动,比如用@scroll指令绑定到scroll-view组件上,或者用this.$refs.listContainer.$on('scroll', () => {})这种方式。如果你用的是Vue的写法,确保组件上用ref声明了.list-container这个节点。

另外,Kraken内部滚动其实是用transform模拟的,所以原生的scroll事件根本不会触发。你检查控制台没报错不代表没问题。我之前就是因为不知道这个机制,浪费了大半天时间。

最后实在不行就改用better-scroll或者自己用touch事件重写一个滚动检测吧,Kraken这块文档确实坑爹。
点赞 4
2026-02-07 03:00