Tab页签的变化

Tab切换(初始版)

场景

​ 实现一个tab页签，当你点击时tab页签的内容才会加载，并且加载的数据第二次点击的时候数据已经缓存。分为动画切换以及非动画切换效果,效果如图所示

​

​ 这个用的别人封装的基础组件，对这个比较感兴趣，就尝试实现了下.使用代码如下(模拟了之前基础组件的使用方式)

const Index = () => {
  const [topBars,setTopBars] = useState(['aaa','bbb','ccc'])
  const [activeKey,setActiveKey] = useState('aaa')

  const handleChangeKey = (activeKey: string) => {
    setActiveKey(activeKey)
  }

  return (
    <Tab 
      topBars={topBars}
      activeKey={activeKey}
      onChangeKeys={handleChangeKey}
      animate={false}
    >
      {topBars.map((item,index) => {
        return (
          <TabItem key={item} activeKey={item}>
            <Child />
          </TabItem>