usePageScroll无效

[icewind7030]

问题描述

编写函数式组件，使用usePageScroll的hook, 没有回调。

复现步骤

//pages/test/test.tsx
import Taro, { usePageScroll} from '@tarojs/taro'
import { View, ScrollView } from '@tarojs/components'
function Test() {
  usePageScroll(res => {
    const {scrollTop} = res;
    console.log('scrolltop', scrollTop);
  })
  return(
    <ScrollView className="scroller" scrollY={true}>
      <View style={{height: `3000rpx`}}></View>
    </ScrollView>
  )
}

export default Test

/*pages/test/test.scss*/
page{
  height: 100%;
}
.scroller{
  height: 100%;
}

期望行为

能够正确响应滚动事件。

报错信息

没有任何输出和报错。

系统信息

Taro v1.3.27


  Taro CLI 1.3.27 environment info:
    System:
      OS: macOS 10.15.1
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 8.16.0 - ~/.nvm/versions/node/v8.16.0/bin/node
      Yarn: 1.19.2 - ~/.yarn/bin/yarn
      npm: 6.4.1 - ~/.nvm/versions/node/v8.16.0/bin/npm
    npmPackages:
      @tarojs/async-await: 1.3.27 => 1.3.27 
      @tarojs/components: 1.3.27 => 1.3.27 
      @tarojs/components-qa: 1.3.27 => 1.3.27 
      @tarojs/plugin-babel: 1.3.27 => 1.3.27 
      @tarojs/plugin-csso: 1.3.27 => 1.3.27 
      @tarojs/plugin-sass: 1.3.27 => 1.3.27 
      @tarojs/plugin-uglifyjs: 1.3.27 => 1.3.27 
      @tarojs/redux: 1.3.27 => 1.3.27 
      @tarojs/redux-h5: 1.3.27 => 1.3.27 
      @tarojs/router: 1.3.27 => 1.3.27 
      @tarojs/taro: 1.3.27 => 1.3.27 
      @tarojs/taro-alipay: 1.3.27 => 1.3.27 
      @tarojs/taro-h5: 1.3.27 => 1.3.27 
      @tarojs/taro-qq: 1.3.27 => 1.3.27 
      @tarojs/taro-quickapp: 1.3.27 => 1.3.27 
      @tarojs/taro-swan: 1.3.27 => 1.3.27 
      @tarojs/taro-tt: 1.3.27 => 1.3.27 
      @tarojs/taro-weapp: 1.3.27 => 1.3.27 
      @tarojs/webpack-runner: 1.3.27 => 1.3.27 
      eslint-config-taro: 1.3.27 => 1.3.27 
      eslint-plugin-taro: 1.3.27 => 1.3.27 
      nerv-devtools: ^1.5.5 => 1.5.6 
      nervjs: ^1.5.5 => 1.5.6 
      stylelint-config-taro-rn: 1.3.27 => 1.3.27 
      stylelint-taro-rn: 1.3.27 => 1.3.27

补充信息

给ScrollView增加的onScroll事件是可以的到滚动事件回调的，请问是我的使用方法有什么错误吗？

[taro-bot]

CC @Chen-jj

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[manfwh]

应该监听ScrollView的滚动事件吧，usePageScroll是监听页面滚动的

[icewind7030]

应该监听ScrollView的滚动事件吧，usePageScroll是监听页面滚动的

确实，之前试的时候不行，现在可以了，应该是我之前在哪里写错了

[icewind7030]

找到问题了，我这个 function component 在最开头做了判断，如果路由中有一个参数为空，则不渲染

const router = useRouter();
if(!router.params.tag) return null

在这个语句之后声明的usePageScroll就不生效，请问这个表现是符合预期的吗？ @ @Chen-jj