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

简介: 好客租房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>
      );
    }
  }

运行结果

图片.png

相关文章
|
7月前
一个满屏品布局怎么设计?
一个满屏品布局怎么设计?
|
2月前
|
JavaScript
手搓日历组件,大屏样式最佳解决方案!
【10月更文挑战第6天】手搓日历组件,大屏样式最佳解决方案!
47 4
手搓日历组件,大屏样式最佳解决方案!
|
6月前
首途第三十三套清新简约卡片风格蓝紫渐变色短视频模板 | 苹果CMSV10主题
首途第三十三套清新简约卡片风格蓝紫渐变色短视频模板 | 苹果CMSV10主题 我们的简约风格,以纯洁的白色和深邃的紫色为主色调,为您提供了一种清新、时尚的浏览体验。在这个简洁而美丽的界面中,您可以轻松畅享各种精彩短视频。我们专注于简单的设计,使用户能够轻松找到他们喜欢的内容,而不受繁杂的界面干扰。紫色的调性为网页增添了一抹神秘和优雅,让您在欣赏视频的同时感受到一份宁静和舒适。清晰的布局和直观的操作,让您可以更专注于视频内容,而不被复杂的功能所困扰
63 1
五款炫酷精美动态登录页面,彩虹气泡动态云层深海灯光水母炫酷星空蛛网HTMLCSS源码
五款炫酷精美动态登录页面,彩虹气泡动态云层深海灯光水母炫酷星空蛛网HTMLCSS源码
151 0
|
前端开发 IDE 开发工具
「趣学前端」优雅又精致,来看看别人家的表格样式是怎样实现
用技术实现梦想,用梦想打开创意之门。今天分享前端CSS中的表格的知识点。
233 0
好客租房106-外观和样式调整
好客租房106-外观和样式调整
62 0
好客租房106-外观和样式调整
盒子综合案例——德云社十八愁与宠物知识栏
盒子综合案例——德云社十八愁与宠物知识栏
144 0
盒子综合案例——德云社十八愁与宠物知识栏
好客租房122-租房样式结构
好客租房122-租房样式结构
109 0
好客租房122-租房样式结构
|
定位技术
好客租房164-地图找房导航栏样式调整
好客租房164-地图找房导航栏样式调整
94 0
好客租房164-地图找房导航栏样式调整
好客租房116-flex布局组件导航菜单
好客租房116-flex布局组件导航菜单
115 0
好客租房116-flex布局组件导航菜单