Merge pull request #1923 from didi/beta-2.10.1-fix-scroll-lower

fix: scrollView lower、upper事件添加滚动方向判断

Author: Blackgan3

packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx

@@ -202,6 +202,8 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout })
 
+  const lastOffset = useRef(0)
+
   if (scrollX && scrollY) {
     warn('scroll-x and scroll-y cannot be set to true at the same time, Mpx will use the value of scroll-y as the criterion')
   }
@@ -259,7 +261,8 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
   function onStartReached (e: NativeSyntheticEvent<NativeScrollEvent>) {
     const { bindscrolltoupper } = props
     const { offset } = scrollOptions.current
-    if (bindscrolltoupper && (offset <= upperThreshold)) {
+    const isScrollingBackward = offset < lastOffset.current
+    if (bindscrolltoupper && (offset <= upperThreshold) && isScrollingBackward) {
       if (!hasCallScrollToUpper.current) {
         bindscrolltoupper(
           getCustomEvent('scrolltoupper', e, {
@@ -280,13 +283,14 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     const { bindscrolltolower } = props
     const { contentLength, visibleLength, offset } = scrollOptions.current
     const distanceFromEnd = contentLength - visibleLength - offset
-    if (bindscrolltolower && (distanceFromEnd < lowerThreshold)) {
+    const isScrollingForward = offset > lastOffset.current
+    if (bindscrolltolower && (distanceFromEnd < lowerThreshold) && isScrollingForward) {
       if (!hasCallScrollToLower.current) {
         hasCallScrollToLower.current = true
         bindscrolltolower(
           getCustomEvent('scrolltolower', e, {
             detail: {
-              direction: scrollX ? 'right' : 'botttom'
+              direction: scrollX ? 'right' : 'bottom'
             },
             layoutRef
           }, props)
@@ -341,6 +345,8 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     onStartReached(e)
     onEndReached(e)
     updateIntersection()
+    // 在 onStartReached、onEndReached 执行完后更新 lastOffset
+    lastOffset.current = scrollOptions.current.offset
   }
 
   function onScrollEnd (e: NativeSyntheticEvent<NativeScrollEvent>) {
@@ -363,6 +369,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     onStartReached(e)
     onEndReached(e)
     updateIntersection()
+    lastOffset.current = scrollOptions.current.offset
   }
   function updateIntersection () {
     if (enableTriggerIntersectionObserver && intersectionObservers) {