费点时间

一、移动端标签页（每个标签里都是一个长列表）滚动至顶切换

当第一个标签的长列表加载了很多数据，滚动条已经滚动到很底部了，这个时候直接切换到第二个标签的长列表时，会自动触发加载分页数据一直到相应的滚动条高度的数据。解决这个问题就是在切换标签前先滚动到顶部再切换标签。

页面里有组件Tabs
index.tsx 页面

import React, { useRef } from 'react';
import Tabs from './Tabs'

const Index = () => {
  const scrollTop = () => {
      if (parentRef?.current) {
        parentRef.current.scrollTop = 0;
      }
    };

  return (
    

      
    
  );
}

Tabs.tsx组件

import React, { useRef, useState, useEffect } from 'react';
import { Tabs as AMTabs } from 'antd-mobile';

import './index.less';

export interface TabsProps {
  scrollTop?: () => void;
}

const Tabs: React.FC = ({  scrollTop }) => {
  const [activeKey, setActiveKey] = useState(0);
 
  const onChangeActiveKey = (key: string) => {
    scrollTop?.();
    setTimeout(() => {
      setActiveKey(key);
    }, 0);
  };


  return (
    
     tab1
     tab2
    
  );
};

export default Tabs;

移动端标签页（每个标签里都是一个长列表）每个标签的长列表可无限加载（向下滚动分页加载）

切换标签后的长列表向下滚动分页加载出现问题，为了解决这一问题，在每个标签的长列表组件里传入一个visible用于无限加载组件的显示/隐藏。只有当前标签的无限加载组件可显示使用（无限加载组件：antd-mobile v5的InfiniteScroll）

现有页面index.tsx 内有Tabs组件

import React, { useRef } from 'react';
import Tabs from './Tabs'

const Index = () => {
  const scrollTop = () => {
      if (parentRef?.current) {
        parentRef.current.scrollTop = 0;
      }
    };

  return (
    

      
    
  );
}

Tabs.tsx组件

import React, { useRef, useState, useEffect } from 'react';
import { Tabs as AMTabs, InfiniteScroll } from 'antd-mobile';

import './index.less';

export interface TabsProps {
  scrollTop?: () => void;
}

const Tabs: React.FC = ({  scrollTop }) => {
  const [activeKey, setActiveKey] = useState(0);
 
  const onChangeActiveKey = (key: string) => {
    scrollTop?.();
    setTimeout(() => {
      setActiveKey(key);
    }, 0);
  };


  return (
    
     tab1{activeKey == 0 && }
     tab2{activeKey == 0 && }
    
  );
};

export default Tabs;