0

我试图让我的标签栏在使用动画向下滚动时消失。如果最后一个 y 坐标大于当前 y 坐标，则 onScroll 发送布尔值，它向上滚动，否则向下滚动。如果我继续向下滚动 onScroll 仍然会向我的函数发送真正的价值，并且动画会不止一次地工作。我如何禁用位置，以便只有 toValue 才能工作，并且我的函数不会一次又一次地触发，而从 onScroll 返回的布尔值是相同的。

function runTiming(value, dest) {
    const clock = new Clock();
    const state = {
        finished: new Value(0),
        position: new Value(0),
        time: new Value(0),
        frameTime: new Value(0),
    };

    const config = {
        duration: 200,
        toValue: new Value(0),
        easing: Easing.inOut(Easing.cubic),
    };

    return block([

        cond(clockRunning(clock), 0, [

            set(state.finished, 0),
            set(state.time, 0),
            set(state.position, value),
            set(state.frameTime, 0),
            set(config.toValue, dest),
            startClock(clock),
        ]),
        timing(clock, state, config),
        cond(state.finished, debug('stop clock', stopClock(clock))),
        state.position,
    ]);
}
4

1 回答 1

0

这可能是由于 onScroll 事件被多次触发。

我昨天刚刚编写了这个代码，将为您提供有效且经过测试的代码：

export const throttle = (func, limit) => {
  let inThrottle
  return function() {
    const args = arguments
    const context = this
    if (!inThrottle) {
      func.apply(context, args)
      inThrottle = true
      setTimeout(() => inThrottle = false, limit)
    }
  }
}

class MainComponent extends PureComponent {
  constructor(props) {
    super(props);

    this.offset = 0;
    this.isAnimatingMenu = false;
    this.onScroll = this.onScroll.bind(this)
  };

  onScroll = throttle(event => {
    const currentOffset = event.nativeEvent.contentOffset.y;
    const direction = currentOffset > this.offset ? 'down' : 'up';
    const diff = currentOffset - this.offset;

    if (direction === 'down' && diff > 9 && !this.isAnimatingMenu) { 
      this.isAnimatingMenu = true
      this.onHideMenu(() => this.isAnimatingMenu = false)
    }

    if (direction === 'up' && diff < -9 && !this.isAnimatingMenu) {
      this.isAnimatingMenu = true
      this.onShowMenu(() => this.isAnimatingMenu = false)
    }

    this.offset = currentOffset;    
  }, 75)

  render() {
    <FlatList 
      windowSize={1}
      bounces={false}
      style={styles.flex1}
      scrollEventThrottle={75}
      onScroll={this.onScroll}
      renderItem={this.renderItem}
      data={this.deriveHomeWidgetsDataFromProps()}
    />
  }
}

在函数onHideMenu中onShowMenu调用动画函数来显示/隐藏菜单。可以在或也onScroll可以实现。如果您需要更多帮助，请告诉我。ScrollViewSectionList

于 2020-04-24T09:10:58.450 回答