好客租房112-tab.item页面重

简介: 好客租房112-tab.item页面重构

tabBar.item

import React from 'react'
import { TabBar } from 'antd-mobile'
import {BrowserRouter as Router,Route, Link} from "react-router-dom"
import News from "../News/index.js"
import Index from "../Index/index.js"
import HouseList from "../HouseList/index.js"
import Profile from "../Profile/index.js"
//导入组件自己的样式文件
import "./index.css"
export default class Home extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
      //  重定向
        selectedTab:this.props.location.pathname,
      };
    }
    renderTabBarItem(){
        const tabItems=[{
            title:"首页",
            icon:'icon-ind',
            path:"/home/index"
        },
        {
            title:"搜索",
            icon:'icon-findHouse',
            path:"/home/list"
        },
        {
            title:"资讯",
            icon:'icon-infom',
            path:"/home/news"
        },
        {
            title:"我的",
            icon:'icon-my',
            path:"/home/profile"
        }
    ]
        return tabItems.map(item=> (
            <TabBar.Item
            title={item.title}
            key={item.title}
            icon={
              <i className={`iconfont ${item.icon}`}>
            }
            // 选中后的展示图片
            selectedIcon={
              iconfont ${item.icon}`}>
            }
            // 是否选中
            selected={this.state.selectedTab === item.path}
            // bar 点击触发,需要自己改变组件 state & selecte={true}
            onPress={() => {
              this.setState({
                selectedTab: item.path,
              });
              //路由切换
              this.props.history.push(item.path)
            }}
          >
              {/* // 将 home 组件作为实参传递
            {this.renderContent()} */}
        ) 
        )
    }
    render() {
      return (
            unselectedTintColor="#21b97a"
            tintColor="#33A3F4"
            barTintColor="white"
            noRenderContent={true}
          >
              {this.renderTabBarItem()}
      );
    }
  }

运行结果

图片.png

相关文章
|
8月前
|
SQL 缓存 JSON
vue利用级联选择器实现全国省市区乡村五级菜单联动
vue利用级联选择器实现全国省市区乡村五级菜单联动
|
3月前
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
75 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
4月前
|
前端开发 数据安全/隐私保护
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
本文档详细介绍了HTML表单的多种元素及其用法,包括下拉菜单(`&lt;select&gt;` 和 `&lt;option&gt;`)、文本域(`&lt;textarea&gt;`)、标签解释(`&lt;label&gt;`)、各类按钮(`&lt;button&gt;`)及表单重置功能、无语义布局标签(`&lt;div&gt;` 和 `&lt;span&gt;`)以及字符实体的应用。此外,还提供了一个完整的注册信息表单案例,涵盖个人信息、教育经历和工作经历等部分,展示了如何综合运用上述元素构建实用的表单。
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
|
4月前
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法,包括清除内外边距、列表项目符号等;探讨了外边距的合并与塌陷问题及其解决策略;讲解了行内元素垂直边距的处理技巧;并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例,展示了所学知识的实际应用。
87 11
|
3月前
|
JavaScript
vue尚品汇商城项目-day03【16.开发Search组件模块中的TypeNav商品分类菜单(过渡动画效果)+17.(优化)针对三级菜单联动进行优化,优化方向为减少查询】
vue尚品汇商城项目-day03【16.开发Search组件模块中的TypeNav商品分类菜单(过渡动画效果)+17.(优化)针对三级菜单联动进行优化,优化方向为减少查询】
42 0
|
存储 小程序 算法
【易售小程序项目】小程序首页完善(滑到底部数据翻页、回到顶端、基于回溯算法的两列数据高宽比平衡)【后端基于若依管理系统开发】
【易售小程序项目】小程序首页完善(滑到底部数据翻页、回到顶端、基于回溯算法的两列数据高宽比平衡)【后端基于若依管理系统开发】
112 0
|
前端开发 应用服务中间件
实战SSM_O2O商铺_40【前端展示】首页轮播图和一级商铺View层的实现
实战SSM_O2O商铺_40【前端展示】首页轮播图和一级商铺View层的实现
129 0
实战SSM_O2O商铺_40【前端展示】首页轮播图和一级商铺View层的实现
饿了么UI中的el-table常见的翻页勾选和序号递增功能实现步骤
饿了么UI中的el-table常见的翻页勾选和序号递增功能实现步骤
338 0
|
前端开发
前端工作总结128-一级控制二级菜单的变化
前端工作总结128-一级控制二级菜单的变化
113 0
前端工作总结128-一级控制二级菜单的变化