100 lines
2.8 KiB
JavaScript
100 lines
2.8 KiB
JavaScript
import React, {FC, Fragment} from "react";
|
||
import {TabBar, FloatingBubble, Toast} from 'antd-mobile'
|
||
import WidthUseNavigate from './../WidthUseNavigate/index'
|
||
import {
|
||
AppOutline,
|
||
MessageOutline,
|
||
UnorderedListOutline,
|
||
UserOutline,
|
||
AddOutline,
|
||
} from 'antd-mobile-icons'
|
||
import "./index.css"
|
||
import DetailForm from "../../components/DetailForm";
|
||
|
||
const tabs = [
|
||
{
|
||
key: '/home',
|
||
title: '树状任务',
|
||
icon: <AppOutline/>,
|
||
badge: '1',
|
||
},
|
||
{
|
||
key: '/home/todo',
|
||
title: '列表任务',
|
||
icon: <UnorderedListOutline/>,
|
||
badge: '2',
|
||
},
|
||
{
|
||
key: '/home/message',
|
||
title: '日历任务',
|
||
icon: <MessageOutline/>,
|
||
badge: '3',
|
||
},
|
||
{
|
||
key: '/home/me',
|
||
title: '我的',
|
||
icon: <UserOutline/>,
|
||
badge: '4',
|
||
},
|
||
]
|
||
class BottomInner extends React.Component {
|
||
|
||
state = {
|
||
// 默认选中的TabBar菜单项
|
||
selectedTab: this.props.useLocation
|
||
}
|
||
|
||
// 组件接收到新的props（此处，实际上是路由信息）就会触发该钩子函数
|
||
componentDidUpdate(prevProps) {
|
||
// prevProps 上一次的props，此处也就是上一次的路由信息
|
||
// this.props 当前最新的props，此处也就是最新的路由信息
|
||
// 注意：在该钩子函数中更新状态时，一定要在 条件判断 中进行，否则会造成递归更新的问题
|
||
if (prevProps.useLocation !== this.props.useLocation) {
|
||
// 此时，就说明路由发生切换了
|
||
this.setState({
|
||
selectedTab: this.props.useLocation
|
||
})
|
||
}
|
||
}
|
||
|
||
setRouteActive = (value) => {
|
||
this.props.to(value)
|
||
this.setState({
|
||
selectedTab: value
|
||
})
|
||
}
|
||
onClick = () => {
|
||
// Toast.show('你点击了气泡')
|
||
this.props.to("/detail/addTask")
|
||
}
|
||
|
||
render() {
|
||
return <Fragment>
|
||
<FloatingBubble
|
||
axis='x'
|
||
magnetic='x'
|
||
style={{
|
||
'--initial-position-bottom': '80px',
|
||
'--initial-position-right': '24px',
|
||
'--edge-distance': '24px',
|
||
}}
|
||
onClick={this.onClick}
|
||
>
|
||
<AddOutline fontSize={32}/>
|
||
</FloatingBubble>
|
||
<TabBar activeKey={this.state.selectedTab} onChange={value => this.setRouteActive(value)}>
|
||
{tabs.map(item => (
|
||
<TabBar.Item key={item.key} icon={item.icon} title={item.title} badge={item.badge}/>
|
||
))}
|
||
</TabBar>
|
||
</Fragment>
|
||
}
|
||
}
|
||
|
||
export function PersonalCenter() {
|
||
return <div>pc端可访问:http://www.hauruyu.com</div>
|
||
}
|
||
|
||
// 使用高阶组件包裹当前类组件
|
||
const Bottom = WidthUseNavigate(BottomInner);
|
||
export default Bottom |