antd-mobile tabbar 路由左右切换动画

最新推荐文章于 2024-07-05 22:10:55 发布

开心就好1314520

最新推荐文章于 2024-07-05 22:10:55 发布

阅读量669

点赞数

文章标签： reactjs

本文链接：https://blog.csdn.net/qq_38388578/article/details/106099926

版权

1、安装react-animated-router

yarn add react-animated-router

2、引入

import AnimatedRouter from 'react-animated-router'; 
import 'react-animated-router/animate.css'; //引入默认的动画样式定义

3、在layout中使用

render() {
    const { children, location, loading, route } = this.props;
    //去除tabbar的其他路由
    if (BarRoutes.indexOf(location.pathname) < 0) {
      return (
        <div style={{ overflowX: 'hidden', height: "100%" }}>
          {children}
        </div>
      )
    }
    //Tabbar路由
    return (
      <div style={{ overflowX: 'hidden', height: "100%" }}>
      <AnimatedRouter >
      <MenuBar pathname={location.pathname}>
          {children}
      </MenuBar>
      </AnimatedRouter>
      </div>
    );
  }