好客租房154-封装顶部导航栏组件(1顶部导航栏)

简介: 好客租房154-封装顶部导航栏组件(1顶部导航栏)

1封装NavHeader组件实现城市选择 地图找房页面的复用

2在component目录中创建NavHeader/index.js

import React from 'react'
import { NavBar } from 'antd-mobile'
export default function NavHeader({children}) {
  return (
    <NavBar
      className="navbar"
      mode="light"
      icon={<i className="iconfont icon-back" />}
      onLeftClick={() => this.props.histoty.push.go(-1)}
      // 导航栏右边内容
      // rightContent={[
      //  <Icon
      //    key="0"
      //    type="search"
      //    style={{ marginRight: '16px' }}
      //  />,
      //  <Icon key="1" type="ellipsis" />,
      // ]}
    >
      {children}
    </NavBar>
  )
}

总结

图片.png

相关文章
|
1月前
|
前端开发
前端如何制作简易的菜单多级导航栏
前端如何制作简易的菜单多级导航栏
49 0
|
3月前
自定义顶部导航栏
自定义顶部导航栏
40 1
|
4月前
|
安全
uniapp实战 —— 自定义顶部导航栏
uniapp实战 —— 自定义顶部导航栏
195 2
|
6月前
ios15从隐藏系统导航栏页面进入显示系统导航栏页面后,期望系统导航栏背景色为白色,但是导航栏背景变成黑色问题
ios15从隐藏系统导航栏页面进入显示系统导航栏页面后,期望系统导航栏背景色为白色,但是导航栏背景变成黑色问题
60 0
|
6月前
uniapp项目怎么删除顶部导航栏
uniapp项目怎么删除顶部导航栏
339 0
|
6月前
|
前端开发 JavaScript
uniapp联动左侧导航栏分类?
uniapp联动左侧导航栏分类?
|
6月前
|
前端开发 JavaScript
左侧导航菜单
左侧导航菜单
|
6月前
左侧导航栏分类 ---联动版本
左侧导航栏分类 ---联动版本
84 0
|
小程序 算法 Java
微信小程序制作顶部导航栏
微信小程序制作顶部导航栏
165 0
|
前端开发
简单侧边导航栏
简单侧边导航栏
113 0
简单侧边导航栏