0
点赞
收藏
分享

微信扫一扫

好客租房109-实现TabBer

1基本使用

页面底部的导航菜单

核心代码拷贝到home中

分析并调整代码 让其在项目中正常运行

好客租房109-实现TabBer_导航菜单

import React from 'react'
import { TabBar } from 'antd-mobile'
//导入路由


class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}

renderContent(pageText) {
return (
<div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
<div style={{ paddingTop: 60 }}>Clicked {pageText} tab, show {pageText} information</div>
<a style={{ display: 'block', marginTop: 40, marginBottom: 20, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
hidden: !this.state.hidden,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</a>
</div>
);
}

render() {
return (
<div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }}>
<TabBar
unselectedTintColor="#949494"
tintColor="#33A3F4"
barTintColor="white"
hidden={this.state.hidden}
tabBarPosition="top"
>
<TabBar.Item
title="Life"
key="Life"
icon={<div style={{
width: '22px',
height: '22px',
background: 'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center / 21px 21px no-repeat' }}
/>
}
selectedIcon={<div style={{
width: '22px',
height: '22px',
background: 'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center / 21px 21px no-repeat' }}
/>
}
selected={this.state.selectedTab === 'blueTab'}
badge={1}
onPress={() => {
this.setState({
selectedTab: 'blueTab',
});
}}
data-seed="logId"
>
{this.renderContent('Life')}
</TabBar.Item>
<TabBar.Item
icon={
<div style={{
width: '22px',
height: '22px',
background: 'url(https://gw.alipayobjects.com/zos/rmsportal/BTSsmHkPsQSPTktcXyTV.svg) center center / 21px 21px no-repeat' }}
/>
}
selectedIcon={
<div style={{
width: '22px',
height: '22px',
background: 'url(https://gw.alipayobjects.com/zos/rmsportal/ekLecvKBnRazVLXbWOnE.svg) center center / 21px 21px no-repeat' }}
/>
}
title="Koubei"
key="Koubei"
badge={'new'}
selected={this.state.selectedTab === 'redTab'}
onPress={() => {
this.setState({
selectedTab: 'redTab',
});
}}
data-seed="logId1"
>
{this.renderContent('Koubei')}
</TabBar.Item>
<TabBar.Item
icon={
<div style={{
width: '22px',
height: '22px',
background: 'url(https://zos.alipayobjects.com/rmsportal/psUFoAMjkCcjqtUCNPxB.svg) center center / 21px 21px no-repeat' }}
/>
}
selectedIcon={
<div style={{
width: '22px',
height: '22px',
background: 'url(https://zos.alipayobjects.com/rmsportal/IIRLrXXrFAhXVdhMWgUI.svg) center center / 21px 21px no-repeat' }}
/>
}
title="Friend"
key="Friend"
dot
selected={this.state.selectedTab === 'greenTab'}
onPress={() => {
this.setState({
selectedTab: 'greenTab',
});
}}
>
{this.renderContent('Friend')}
</TabBar.Item>
<TabBar.Item
icon={{ uri: 'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg' }}
selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg' }}
title="My"
key="my"
selected={this.state.selectedTab === 'yellowTab'}
onPress={() => {
this.setState({
selectedTab: 'yellowTab',
});
}}
>
{this.renderContent('My')}
</TabBar.Item>
</TabBar>
</div>
);
}
}

export default Home

  本文只贴出部分代码 需要全代码关注微信公众号前端小歌谣 


举报

相关推荐

0 条评论