目录
全局路由
在umi项目的src中创建loyouts，src/loyouts/index.js中编写一个react组件。
组件默认接收一个props属性为children，children将会默认渲染src/page/index.js下也就是umi的默认进入页，路由切换时等于是切换children部分。
剩下的部分可以全局渲染，因此可以把标签渲染在底部全局，children放在上方，就达到了点击下方标签，切换路由的效果
示例
我示例使用的是antd-mobile v5.0.0-rc.3和react-transition-group，在umi项目中需要额外安装。
yarn add react-transition-group yarn add antd-mobile@v5.0.0-rc.3
src/loyouts/index.js代码
我想要的效果是标签页的切换都是用replace实现，当检测history.action === 'REPLACE'时，则根据标签页的前后顺序决定向左还是向右切换动画。
当history.action === 'PUSH'或者'POP'时，后续将会PUSH进入二级页面，就是前进，点击浏览器后退就是POP后退
import styles from './index.less'; import { TabBar } from 'antd-mobile/2x'; import router from 'umi/router'; import { TransitionGroup, CSSTransition } from 'react-transition-group'; import withRouter from 'umi/withRouter'; import React, { useState } from 'react'; import home1 from '@/assets/home1.png'; import home2 from '@/assets/home2.png'; import update1 from '@/assets/update1.png'; import update2 from '@/assets/update2.png'; import collect1 from '@/assets/collect1.png'; import collect2 from '@/assets/collect2.png'; import my1 from '@/assets/my1.png'; import my2 from '@/assets/my2.png'; export default withRouter(({ location, children, history }) => { // 根据前进还是后退显示不同的转场动画效果 const ANIMATION_MAP = { PUSH: 'forward', POP: 'back', }; // 路由跳转时执行 const checkrouter = () => { const { state = {} } = location; //beforepath 跳转前路由，只有在四个标签页跳转时有传递 const { beforepath } = state; //curpath 当前路由 const curpath = history.location.pathname; // 标签页路由集合 const indexRouter = ['/', '/update', '/collect', '/my']; // 判断是不是标签页跳转 const flag = history.action === 'REPLACE'; // 判断标签页跳转前后顺序 const before = indexRouter.findIndex(cur => cur === beforepath); const after = indexRouter.findIndex(cur => cur === curpath); const change = before < after ? 'PUSH' : 'POP'; // 如果当前路由不是标签，说明跳去了二级页面，应该隐藏标签 sethide(after === -1); // 设置转场动画效果 return ANIMATION_MAP[flag ? change : history.action]; }; // 判断标签页是否隐藏 const [hide, sethide] = useState(false); const tabs = [ { key: '/', title: '首页', icon: <img src={home1} className={styles.iconImg} alt="首页" />, selectedIcon: <img src={home2} className={styles.iconImg} alt="首页" />, }, { key: '/update', title: '更新', icon: <img src={update1} className={styles.iconImg} alt="更新" />, selectedIcon: <img src={update2} className={styles.iconImg} alt="更新" />, }, { key: '/collect', title: '收藏', icon: <img src={collect1} className={styles.iconImg} alt="收藏" />, selectedIcon: <img src={collect2} className={styles.iconImg} alt="收藏" />, }, { key: '/my', title: '我的', icon: <img src={my1} className={styles.iconImg} alt="我的" />, selectedIcon: <img src={my2} className={styles.iconImg} alt="我的" />, }, ]; return ( <div style={{ display: 'flex', flexDirection: 'column', height: '100%', paddingBottom: '5rem' }} > <div style={{ flex: 1, display: 'flex', overflow: 'auto' }}> <TransitionGroup childFactory={child => React.cloneElement(child, { classNames: checkrouter() })} > <CSSTransition key={location.pathname} timeout={300} style={{ position: 'fixed', height: '100%', width: '100%', top: '0', overflow: 'auto', // 隐藏标签时要把下方padding重置为0 paddingBottom: hide ? '0rem' : '5rem', }} > <div>{children}</div> </CSSTransition> </TransitionGroup> </div> <div className={styles.normal} style={{ visibility: hide ? 'hidden' : 'unset' }}> <TabBar activeKey={location.pathname} onChange={beforepath => // 标签跳转，使用replace，同时传递跳转前路由 router.replace(beforepath, { beforepath: history.location.pathname }) } > {tabs.map(item => ( <TabBar.Item key={item.key} // 切换选中未选中图片 icon={location.pathname === item.key ? item.selectedIcon : item.icon} title={item.title} /> ))} </TabBar> </div> </div> ); });
样式代码
src/global.less
我是用rem加vw的方式做全局适配。因此你会看到我使用长度一般是rem/20这种奇怪的单位，1rem等于html的font-size100/750vw*20，则750rem/20就是100vw，就是一整个屏幕宽度，一般的ui设计图是750px，也就是只要把设计图上的数字使用rem/20单位就可以进行任何设备的适配了。
html, body, #root { height: 100%; font-family: '楷体'; } html { font-size: 100/750vw*20; } body { margin: 0; }
src/loyouts/index.less
- 前进和后退的动作在前半部分，后面是antd页标签的适配调整，可以适配大屏小屏任何设备。
:global { .forward-enter { opacity: 0; transform: translateX(100%); } .forward-enter-active { opacity: 1; transform: translateX(0); transition: all 300ms ease-in; } .forward-exit { opacity: 1; transform: translateX(0); } .forward-exit-active { opacity: 0; transform: translateX(-100%); transition: all 300ms ease-in; } .back-enter { opacity: 0; transform: translateX(-100%); } .back-enter-active { opacity: 1; transform: translateX(0); transition: all 300ms ease-in; } .back-exit { opacity: 1; transform: translateX(0); } .back-exit-active { opacity: 0; transform: translate(100%); transition: all 300ms ease-in; } } .normal { position: fixed; bottom: 0; width: 100%; height: 100rem/20; background-color: white; // border-top: 1rem/20 solid lightgray; box-shadow: 0 -1px 10px 1px rgba(0, 0, 0, 0.1); :global { .adm-tab-bar-item { height: 100rem/20; .adm-tab-bar-item-icon { height: 40rem/20; width: 40rem/20; margin: 0; font-size: initial; } .adm-tab-bar-item-title { font-size: 24rem/20; line-height: unset; } } .adm-tab-bar-item-active { color: #B9E2F6; } } } .iconImg { width: 40rem/20; height: $width; }
