百度小程序内自定义组件内 usePageScroll、useReachBottom 等 hooks不执行

[yantingxi]

相关平台

百度小程序

小程序基础库: 3.310.36 使用框架: React

复现步骤

正常使用后不生效 部分代码如下

import Taro, { FC, memo, useState, usePageScroll, useReachBottom } from '@tarojs/taro';
import cx from 'classnames';
import { View } from '@tarojs/components';
import { getSystemInfo } from '@utils/system';
import { mergeStyle } from '@utils/common';

import { CTopBarProps } from '../../types/CTopBar';
import { IconBaseProps } from '../../types/base';
import CIcon from '../CIcon';

import './index.less';

const CTopBar: FC<CTopBarProps> = (props: CTopBarProps) => {
    const {
        title,
        blank,
        fixed,
        className,
        customStyle,
        gradientThreshold = 0,
    } = props;
    const [gradientThresholdRatio, setGradientThresholdRatio] = useState(0);
    
    usePageScroll((detail) => {
        console.log(detail)
        const ratio = detail.scrollTop / gradientThreshold;
        gradientThreshold && setGradientThresholdRatio(ratio > 1 ? 1 : ratio);
    });

    const { statusBarHeight, navigationBarHeight, barHeight } = getSystemInfo();

    const wrapStyle = {
        marginTop: `${statusBarHeight}PX`,
        height: `${navigationBarHeight}PX`
    };

    const innerStyle = {
        height: fixed ? `${barHeight}PX` : `${navigationBarHeight}PX`
    };

    const gradientStyle = gradientThreshold
        ? {
              background: `rgba(255, 255, 255, ${gradientThresholdRatio})`,
              color: `rgba(${(1 - gradientThresholdRatio) * 255}, ${(1 - gradientThresholdRatio) * 255}, ${
                  (1 - gradientThresholdRatio) * 255
              })`
          }
        : undefined;

    const contentStyle = {
        top: fixed ? `${statusBarHeight + navigationBarHeight / 2}PX` : '50%',
        transform: 'translateY(-50%)'
    };

    const iconProps: IconBaseProps = {
        value: 'home',
        className: 'top-bar__home-icon',
        size: 54
    };

    return (
      
        <View
            className={cx('top-bar', className, {
                'top-bar--no-blank': !blank
            })}
            style={wrapStyle}
        >
            <View
                className={cx('top-bar__inner', {
                    'top-bar__inner--fixed': fixed
                })}
                style={mergeStyle(mergeStyle(innerStyle, customStyle), gradientStyle)}
            >
                <View className='top-bar__content' style={contentStyle}>
                    <CIcon {...iconProps} />
                </View>
            </View>
        </View>
    );
};

CTopBar.defaultProps = {
    blank: true,
    fixed: true,
    gradientThreshold: 0,
    title: ''
};

export default memo(CTopBar);

期望结果

能正常生效

实际结果

不生效

环境信息

👽 Taro v2.2.17


  Taro CLI 2.2.17 environment info:
    System:
      OS: macOS 11.4
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 14.17.0 - /usr/local/bin/node
      npm: 6.14.13 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: ^2.2.17 => 2.2.17
      @tarojs/components: 2.2.17 => 2.2.17
      @tarojs/components-qa: 2.2.17 => 2.2.17
      @tarojs/mini-runner: 2.2.17 => 2.2.17
      @tarojs/plugin-less: 2.2.17 => 2.2.17
      @tarojs/plugin-terser: 2.2.17 => 2.2.17
      @tarojs/router: 2.2.17 => 2.2.17
      @tarojs/taro: 2.2.17 => 2.2.17
      @tarojs/taro-alipay: 2.2.17 => 2.2.17
      @tarojs/taro-h5: 2.2.17 => 2.2.17
      @tarojs/taro-qq: 2.2.17 => 2.2.17
      @tarojs/taro-quickapp: 2.2.17 => 2.2.17
      @tarojs/taro-rn: 2.2.17 => 2.2.17
      @tarojs/taro-swan: 2.2.17 => 2.2.17
      @tarojs/taro-tt: 2.2.17 => 2.2.17
      @tarojs/taro-weapp: 2.2.17 => 2.2.17
      @tarojs/webpack-runner: 2.2.17 => 2.2.17
      eslint-config-taro: 2.2.17 => 2.2.17
      eslint-plugin-taro: 2.2.17 => 2.2.17
      nerv-devtools: ^1.5.5 => 1.5.7
      nervjs: ^1.5.5 => 1.5.7
      stylelint-config-taro-rn: 2.2.17 => 2.2.17
      stylelint-taro-rn: 2.2.17 => 2.2.17

[SakuOtonashi]

微信小程序插件里 usePageScroll 也不执行

[hqwlkj]

usePageScroll

最后怎么处理的呢？