fix(List): skip check when inside an inactive tab (#8741)

src/list/List.tsx

@@ -14,6 +14,7 @@ import { isHidden, truthProp, createNamespace } from '../utils';
 // Composables
 import { useRect, useScrollParent, useEventListener } from '@vant/use';
 import { useExpose } from '../composables/use-expose';
+import { useTabStatus } from '../composables/use-tab-status';
 
 // Components
 import { Loading } from '../loading';
@@ -50,11 +51,18 @@ export default defineComponent({
     const loading = ref(false);
     const root = ref<HTMLElement>();
     const placeholder = ref<HTMLElement>();
+    const tabStatus = useTabStatus();
     const scrollParent = useScrollParent(root);
 
     const check = () => {
       nextTick(() => {
-        if (loading.value || props.finished || props.error) {
+        if (
+          loading.value ||
+          props.finished ||
+          props.error ||
+          // skip check when inside an inactive tab
+          tabStatus?.value === false
+        ) {
           return;
         }
 
@@ -62,7 +70,7 @@ export default defineComponent({
         const scrollParentRect = useRect(scrollParent);
 
         if (!scrollParentRect.height || isHidden(root)) {
-          return false;
+          return;
         }
 
         let isReachEdge = false;

src/list/test/index.spec.js

@@ -1,4 +1,6 @@
 import { List } from '..';
+import { Tab } from '../../tab';
+import { Tabs } from '../../tabs';
 import { mount, later, mockGetBoundingClientRect } from '../../../test';
 
 test('should emit load event when reaching bottom', async () => {
@@ -134,3 +136,25 @@ test('should render correctly when direction is up', async () => {
   expect(children[0].classes()).toContain('list-item');
   expect(children[1].classes()).toContain('van-list__placeholder');
 });
+
+test('should not emit load event when inside an inactive tab', async () => {
+  const onLoad1 = jest.fn();
+  const onLoad2 = jest.fn();
+
+  mount({
+    render: () => (
+      <Tabs active={0} animated>
+        <Tab>
+          <List onLoad={onLoad1} />
+        </Tab>
+        <Tab>
+          <List onLoad={onLoad2} />
+        </Tab>
+      </Tabs>
+    ),
+  });
+
+  await later();
+  expect(onLoad1).toHaveBeenCalledTimes(1);
+  expect(onLoad2).toHaveBeenCalledTimes(0);
+});