全局路由

在umi项目的src中创建layouts，src/layouts/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/layouts/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 (<divstyle={{ display: 'flex', flexDirection: 'column', height: '100%', paddingBottom: '5rem' }}><div style={{ flex: 1, display: 'flex', overflow: 'auto' }}><TransitionGroupchildFactory={child => React.cloneElement(child, { classNames: checkrouter() })}><CSSTransitionkey={location.pathname}timeout={300}style={{position: 'fixed',height: '100%',width: '100%',top: '0',overflow: 'auto',// 隐藏标签时要把下方padding重置为0paddingBottom: hide ? '0rem' : '5rem',}}><div>{children}</div></CSSTransition></TransitionGroup></div><div className={styles.normal} style={{ visibility: hide ? 'hidden' : 'unset' }}><TabBaractiveKey={location.pathname}onChange={beforepath =>// 标签跳转，使用replace，同时传递跳转前路由router.replace(beforepath, { beforepath: history.location.pathname })}>{tabs.map(item => (<TabBar.Itemkey={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;
}

umi 如何实现标签页切换和路由动效相关推荐

php 标签页切换,vue.js实现标签页切换效果
第二个实例是关于标签页切换的,先看一下效果: 这也是一个很常见的交互效果,以往正常的javascript写法是给各个按钮绑定事件来切换不同的层,当然也可以用纯css写,给上面的三个切换的层分别添加一个 ...
BootStrap之标签页切换
标签页切换标签页切换标签页插件第一个官方例子调用tab("show")显示tab-pane中的内容第一个例子的HTML+CSS代码 fade in效果函数介绍前提条件 ...
JavaScript 实现标签页切换效果
JavaScript 实现标签页切换效果构建主体界面 HTML 代码 <h1>实现标签页的切换效果</h1> <ul id="tab">& ...
【Axure RP9基础】 Axure标签页切换详解
[Axure RP9基础] 标签页切换在设计原型中,PC和APP端标签页切换是常用的功能,那么在用Axure画原型时我们可以用矩形和动态面板做出标签页切换的效果. 最终效果:点击标签页,显示标签页选 ...
微信小程序中标签页切换效果是怎么做出来的
于传统网页开发中的标签页切换效果不同的是,小程序的标签页切换更接近原生APP的交互体验!也就是可以通过左右滑动页面进行切换,类似于网页开发中的焦点图切换的效果. --这当然是通过微信小程序强大的组件和 ...
Python爬虫之selenium对标签页切换、切换frame标签、cookie处理、执行js代码、开启无界面、以及使用代理ip和替换user-agent等方法
一.selenium对标签页切换.切换frame标签.cookie处理.执行js代码.开启无界面.以及使用代理ip和替换user-agent等方法 (一).selenium标签页的切换当seleni ...
bootstrap --- 标签页切换
很多时候,我们希望写一个简单的标签页.以下使用bootstrap来实现- 首先导入bootstrap的依赖:jquery的依赖.bootstrap的依赖注意: jquery的依赖要在bootstra ...
ocx控件 postmessage消息会消失_实战经验：如何检测CMFCTabCtrl控件标签页切换事件...
MFC库中经常会使用到的一个控件是Tab标签页控件,这个控件在展现多个平级数据集非常合适. 与控件对应的,是MFC库中的两个类:CMFCTabCtrl和CMFCBaseTabCtrl,其中CMFCTa ...
[ElementPlus] 多标签页切换
版本 "element-plus": "2.1.9" Store export interface Tab {title: stringcontent: str ...

umi 如何实现标签页切换和路由动效

目录

全局路由

示例

umi 如何实现标签页切换和路由动效相关推荐

最新文章

热门文章