费点时间

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

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

页面里有组件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;
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容