bolan9999 / react-native-largelist

The best large list component for React Native.
https://bolan9999.github.io/react-native-largelist/
MIT License
2.32k stars 261 forks source link

LargeList滑动到顶部后瞬间自动滑动底部 #461

Closed anyway2019 closed 2 years ago

anyway2019 commented 2 years ago

简单描述就是切换largeList数据源之后调用ScrolTo顶部不起作用。 版本号:

    "react-native-spring-scrollview": "^3.0.1-rc.4",
    "react-native-largelist-v3": "^3.0.15",

list的父容器高度是screen.height - NavHeader.height-StatusBar.height; 部分代码:

  <Animated.View
            style={{
              transform:[{translateY:this.offsetA*viewheight}],
              marginTop:this.state.nextIndex * viewheight,
              height: viewheight,
              width: width,
             }}>

            <LargeList {...listprops}
                onStartShouldSetResponderCapture={() => this._listViewDirtyPressEnabled}
                onMomentumScrollBegin={() => {
                    if (!this._listViewDirtyPressEnabled) {
                        this._listViewDirtyPressEnabled = true
                    }
                    this.preloadNextList();
                }}
                onMomentumScrollEnd={() => {
                    setTimeout(() => {
                        if (this._listViewDirtyPressEnabled) {
                            this._listViewDirtyPressEnabled = false
                        }
                    }, 5);

                }}
            />
  </Animated.View>
bolan9999 commented 2 years ago

读了几遍没读懂,可以录个视频看看吗? 自动滑动的地方就是当内容视图更新后缩减了高度,造成内容超出内容视图外,会自动滑动到边缘位置。我感觉你这个应该不是这个情况

anyway2019 commented 2 years ago

https://youtu.be/kCMKWgYLVNE 视频最后一个列表直接到底部了,其实这个时候我已经调用ScrollTo顶部的逻辑。

bolan9999 commented 2 years ago

是视频第15秒?

anyway2019 commented 2 years ago

读了几遍没读懂,可以录个视频看看吗? 自动滑动的地方就是当内容视图更新后缩减了高度,造成内容超出内容视图外,会自动滑动到边缘位置。我感觉你这个应该不是这个情况

largeList的高度如果有小数位就会出现类似的情况(ps:还会出现一种情况onloading事件一直不触发); 我这个情况是因为下面获取的height原始值是带有小数位的,现在取整就好了,另外StatusBar的高度也是小数位重新取整。

 <View onLayout={(event) => {
                var {x, y, width, height} = event.nativeEvent.layout;
                global.screenHeight = Math.max(parseInt(width), parseInt(height));
                console.log(91,global.screenHeight);
                }} style={{flex:1}}>
                <MyStackApp />
                {/* <Text style={{position:'absolute',bottom:60,alignSelf:'center'}}>当前下载进度</Text> */}
            </View>
bolan9999 commented 2 years ago

你说你用了两个列表,层级是怎样的。在什么时机调用的scrollTo,有没有流程log或debug跟踪确保你业务是否正确。你说切换数据源是指用的一个列表更新的数据然后调用的scrollTo?

anyway2019 commented 2 years ago

是视频第15秒?

是的,应该是列表的高度有小数位导致的。

anyway2019 commented 2 years ago

你说你用了两个列表,层级是怎样的。在什么时机调用的scrollTo,有没有流程log或debug跟踪确保你业务是否正确。你说切换数据源是指用的一个列表更新的数据然后调用的scrollTo?

是的,单列表之前也有这个问题,业务逻辑应该没问题的检查了好多次。应该和两个列表没关系;两个列表的层级目前是平级只是用transform做上下切换。应该是精度太大了,然后我做加减位移的时候会有问题。

bolan9999 commented 2 years ago

你说你用了两个列表,层级是怎样的。在什么时机调用的scrollTo,有没有流程log或debug跟踪确保你业务是否正确。你说切换数据源是指用的一个列表更新的数据然后调用的scrollTo?

是的,单列表之前也有这个问题,业务逻辑应该没问题的检查了好多次。应该和两个列表没关系;两个列表的层级目前是平级只是用transform做上下切换。

单列表到底表现是什么?说实话你说了这么多,我基本一句没听懂。scrollTo有问题可以拎出来单独测试说明

bolan9999 commented 2 years ago

你贴的伪代码也是,完全不知道你想表达的是什么。

bolan9999 commented 2 years ago

scrollTo带动画是可中断的,其他scrollTo或者手指重新点击列表都会中断scrollTo的

anyway2019 commented 2 years ago

scrollTo带动画是可中断的,其他scrollTo或者手指重新点击列表都会中断scrollTo的

那我是试试在动画执行完再执行其他操作吧,刚才高度调整之后还是有机会重现问题,我再试下InteractionManager.runAfterInteraction这方法。 我刚才说那么多是以为列表的高度设置不当会导致ScrollTo系列的方法异常。

bolan9999 commented 2 years ago

基本逻辑我已经说得很清楚了,就两点

  1. 内容视图高度减少导致检测到超出边界会弹回去,这也是通过scrollTo实现的
  2. scrollTo是可中断的,你这种情况可以考虑禁用scrollTo动画
anyway2019 commented 2 years ago

基本逻辑我已经说得很清楚了,就两点

  1. 内容视图高度减少导致检测到超出边界会弹回去,这也是通过scrollTo实现的
  2. scrollTo是可中断的,你这种情况可以考虑禁用scrollTo动画

scrollTo已经禁用动画了, 我尝试禁用源码的endLoading的动画也不行,只有我手上的这个红米k30容易重现这个问题。你说的这个第一点的逻辑源码在哪边。