好客租房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

相关文章
|
7月前
|
前端开发
TienChin 活动管理-活动列表展示
TienChin 活动管理-活动列表展示
22 0
|
6月前
|
开发者
【 uniapp - 黑马优购 | 购物车页面(1)】如何创建购物车编译模式、 商品列表区域实现
【 uniapp - 黑马优购 | 购物车页面(1)】如何创建购物车编译模式、 商品列表区域实现
121 0
|
4月前
|
数据采集 API 数据安全/隐私保护
什么是item_get,它在电商中有什么作用?
一、引言 在当今的电子商务时代,用户对于获取商品详情的渴望与日俱增。商品详情不仅包括产品的基本属性,如颜色、尺寸、材质等,还包括产品的背景信息、使用指南和其他相关内容。Item_Get作为一种获取商品详情的技术手段,已经在电商领域中发挥了重要的作用。
|
6月前
|
存储 小程序 API
【 uniapp - 黑马优购 | 购物车页面(2)】如何实现收货地址区域功能、常见问题解决方案
【 uniapp - 黑马优购 | 购物车页面(2)】如何实现收货地址区域功能、常见问题解决方案
166 0
|
前端开发
前端工作总结128-一级控制二级菜单的变化
前端工作总结128-一级控制二级菜单的变化
70 0
前端工作总结128-一级控制二级菜单的变化
|
存储
好客租房136-获取当前定位数据并渲染到列表中
好客租房136-获取当前定位数据并渲染到列表中
97 0
好客租房65-render-props模式-1思路分析
好客租房65-render-props模式-1思路分析
65 0
|
索引
好客租房149-渲染右侧索引列表(点击索引指定该索引城市)
好客租房149-渲染右侧索引列表(点击索引指定该索引城市)
96 0
好客租房149-渲染右侧索引列表(点击索引指定该索引城市)
|
前端开发 JavaScript
好客租房66-render-props模式-2使用模式
好客租房66-render-props模式-2使用模式
57 0
好客租房66-render-props模式-2使用模式
|
索引
好客租房147-渲染(渲染右侧索引列表
好客租房147-渲染(渲染右侧索引列表
81 0
好客租房147-渲染(渲染右侧索引列表