ScrollView 的 lower 事件之谜：解决手动清空内容后意外触发的难题

2023-11-22 03:13:20

引言

在开发钉钉小程序的过程中，我们遇到了一个奇怪的问题：当 ScrollView 的垂直方向滚动触发 lower 事件时，如果手动清空其内容，则会莫名触发该事件。这一问题导致上拉加载分页列表时出现异常行为，给开发带来了困扰。

问题根源

经过深入调查，我们发现问题根源在于 ScrollView 的滚动事件处理机制。当 ScrollView 内容被清空后，ScrollView 的滚动位置会自动重置为顶部。然而，由于 lower 事件是在滚动位置到达底部时触发的，所以当内容被清空后，ScrollView 的滚动位置重置为顶部，但 lower 事件仍然被触发了一次。

解决方案

为了解决这个问题，我们需要在清空 ScrollView 内容之前，先手动触发一次滚动事件，将滚动位置重置为顶部。这样，当内容被清空后，ScrollView 的滚动位置已经处于顶部，就不会触发 lower 事件了。

具体来说，我们可以使用以下代码：

// 在清空 ScrollView 内容之前
scrollView.scrollTo({
  y: 0,
  animated: false,
});

// 清空 ScrollView 内容
scrollView.children.clear();

步骤指南

以下是解决该问题的详细步骤指南：

在清空 ScrollView 内容之前，使用 scrollTo() 方法将滚动位置重置为顶部。
清空 ScrollView 的内容。
重新加载或更新 ScrollView 的内容。

实例代码

为了帮助大家更好地理解，我们提供了一个示例代码片段，演示如何解决 ScrollView 内容清空后意外触发 lower 事件的问题：

import React, { useState } from "react";
import { ScrollView, StyleSheet, View, Button, Text } from "react-native";

const App = () => {
  const [data, setData] = useState([1, 2, 3, 4, 5]);

  const handleClear = () => {
    // 在清空 ScrollView 内容之前，将滚动位置重置为顶部
    scrollView.scrollTo({
      y: 0,
      animated: false,
    });

    // 清空 ScrollView 内容
    setData([]);
  };

  const handleAdd = () => {
    // 重新加载或更新 ScrollView 的内容
    setData([...data, ...[6, 7, 8, 9, 10]]);
  };

  return (
    <View style={styles.container}>
      <ScrollView
        ref={(ref) => (scrollView = ref)}
        onScroll={({ nativeEvent }) => {
          if (nativeEvent.contentOffset.y >= nativeEvent.contentSize.height - nativeEvent.layoutMeasurement.height) {
            console.log("触发 lower 事件");
          }
        }}
        style={styles.scrollView}
      >
        {data.map((item) => (
          <Text key={item} style={styles.item}>
            {item}
          </Text>
        ))}
      </ScrollView>
      <View style={styles.buttonContainer}>
        <Button title="清空" onPress={handleClear} />
        <Button title="添加" onPress={handleAdd} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  scrollView: {
    width: "100%",
    height: "80%",
  },
  item: {
    fontSize: 24,
    padding: 10,
    margin: 5,
    backgroundColor: "#ccc",
  },
  buttonContainer: {
    flexDirection: "row",
    justifyContent: "space-around",
    width: "100%",
  },
});

export default App;