好客租房110-修改tabber样式外观-阿里云开发者社区

好客租房110-修改tabber样式外观

2022-06-14 137

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 好客租房110-修改tabber样式外观

1删除前面页面路由的样式

2修改tabbar菜单项文字标题

3修改tabbar菜单文字标题颜色

4使用字体图标修改tabber菜单的图标

5修改tabbar菜单项的图标大小

6调整tabbar菜单的位置让其固定在最底部

import React from 'react'
import { TabBar } from 'antd-mobile'
//导入组件自己的样式文件
import "./index.css"
export default class Home extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
      //  重定向
        selectedTab: 'blueTab',
      };
    }
  // 组件页面跳转
    renderContent(com) {
      return (
        <div>{com}</div>
      );
    }
    render() {
      return (
        <div className='home'>
          <TabBar
            unselectedTintColor="#21b97a"
            tintColor="#33A3F4"
            barTintColor="white"
          >
            {/* 首页 */}
            <TabBar.Item
              title="首页"
              key="home"
              icon={
                <i className='iconfont icon-ind'></i>
              }
              // 选中后的展示图片
              selectedIcon={
                <i className='iconfont icon-ind'></i>
              }
              // 是否选中
              selected={this.state.selectedTab === 'blueTab'}
              // bar 点击触发，需要自己改变组件 state & selecte={true}
              onPress={() => {
                this.setState({
                  selectedTab: 'blueTab',
                });
              }}
            >
                {/* // 将 home 组件作为实参传递
              {this.renderContent()} */}
            </TabBar.Item>
            {/* 分类 */}
            <TabBar.Item
              icon={
                <i className='iconfont icon-findHouse'></i>
              }
              selectedIcon={
                <i className='iconfont icon-findHouse'></i>
              }
              title="搜索"
              key="category"
              selected={this.state.selectedTab === 'redTab'}
              onPress={() => {
                this.setState({
                  selectedTab: 'redTab',
                });
              }}
            >
              {/* {this.renderContent()} */}
            </TabBar.Item>
            {/* 购物车 */}
            <TabBar.Item
              icon={
                <i className='iconfont icon-infom'></i>
              }
              selectedIcon={
                <i className='iconfont icon-infom'></i>
              }
              title="资讯"
              key="cart"
              dot
              selected={this.state.selectedTab === 'greenTab'}
              onPress={() => {
                this.setState({
                  selectedTab: 'greenTab',
                });
              }}
            >
              {/* {this.renderContent()} */}
            </TabBar.Item>
            {/* 用户 */}
            <TabBar.Item
              icon={<i className='iconfont icon-my'></i>}
              selectedIcon={<i className='iconfont icon-my'></i>}
              title="我的"
              key="user"
              selected={this.state.selectedTab === 'yellowTab'}
              onPress={() => {
                this.setState({
                  selectedTab: 'yellowTab',
                });
              }}
            >
              {/* {this.renderContent()} */}
            </TabBar.Item>
          </TabBar>
        </div>
      );
    }
  }