费点时间

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

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

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

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

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

  return (
    <div className="app2-wrapper" ref={parentRef}>
      <Tabs scrollTop={scrollTop}  />
    </div>
  );
}

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<TabsProps> = ({  scrollTop }) => {
  const [activeKey, setActiveKey] = useState<string | undefined>(0);
 
  const onChangeActiveKey = (key: string) => {
    scrollTop?.();
    setTimeout(() => {
      setActiveKey(key);
    }, 0);
  };


  return (
    <AMTabs className="app-tabs-wrapper" activeKey={activeKey} onChange={onChangeActiveKey}>
     <AMTabs.Tab key={0} title={"tab1"} forceRender={true}>tab1</AMTabs.Tab >
     <AMTabs.Tab key={1} title={"tab1"} forceRender={true}>tab2</AMTabs.Tab >
    </AMTabs>
  );
};

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 (
    <div className="app2-wrapper" ref={parentRef}>
      <Tabs scrollTop={scrollTop}  />
    </div>
  );
}

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<TabsProps> = ({  scrollTop }) => {
  const [activeKey, setActiveKey] = useState<string | undefined>(0);
 
  const onChangeActiveKey = (key: string) => {
    scrollTop?.();
    setTimeout(() => {
      setActiveKey(key);
    }, 0);
  };


  return (
    <AMTabs className="app-tabs-wrapper" activeKey={activeKey} onChange={onChangeActiveKey}>
     <AMTabs.Tab key={0} title={"tab1"} forceRender={true}>tab1{activeKey == 0 && <InfiniteScroll />}</AMTabs.Tab >
     <AMTabs.Tab key={1} title={"tab1"} forceRender={true}>tab2{activeKey == 0 && <InfiniteScroll />}</AMTabs.Tab >
    </AMTabs>
  );
};

export default Tabs;