列表找房（一）——顶部搜索栏-基本布局 & 跳转主页-this.props.history.push(‘home‘)

列表找房——顶部搜索栏-基本布局 & this.props.history.push(’/home’)

列表找房业务分析

• 页面顶部有一个搜索栏，点击左侧箭头回到主页
• 组合筛选条件栏
  • 前三个筛选条件弹窗类似
  • 最后一个筛选条件弹窗不同
• 筛选结果列表展示（基于长列表缓存组件）

顶部搜索栏

基本布局

在src/views/Find/index.js中

<Flex className='header'>
  <i className="iconfont icon-back" />
  <Flex className='search-box searchHeader'>
    {/* 左侧白色区域 */}
    <Flex className="search">
      {/* 位置 */}
      <div className="location" >
        <span className="name">北京</span>
        <i className="iconfont icon-arrow" />
      </div>

      {/* 搜索表单 */}
      <div className="form" >
        <i className="iconfont icon-seach" />
        <span className="text">请输入小区或地址</span>
      </div>
    </Flex>
    {/* 右侧地图图标 */}
    <i className="iconfont icon-map" />
  </Flex>
</Flex>

在src/views/Find/index.scss中

.header {
  position: absolute;
  top: 0;
  width: 100%;
  height: 45px;
  padding: 0 10px;
  background-color: #f6f5f6;
  .icon-back {
    font-size: 16px;
    color: #999;
  }
  .searchHeader {
    position: relative;
    top: 0;
    padding: 0;
    .icon-map {
      color: #00ae66;
    }
    .search {
      height: 30px;
    }
  }
}
// 顶部导航
.search-box {
  position: absolute;
  top: 5px;
  width: 100%;
  padding: 0 20px;

  // 左侧白色区域
  .search {
    flex: 1;
    height: 34px;
    margin: 0 10px;
    padding: 5px 5px 5px 8px;
    border-radius: 3px;
    background-color: #fff;

    // 位置
    .location {
      .icon-arrow {
        margin-left: 2px;
        font-size: 12px;
        color: #7f7f80;
      }
    }

    // 搜索表单
    .form {
      border-left: solid 1px #e5e5e5;
      margin-left: 12px;
      line-height: 16px;

      .icon-seach {
        vertical-align: middle;
        padding: 0 2px 0 12px;
        color: #9c9fa1;
        font-size: 15px;
      }

      .text {
        padding-left: 4px;
        font-size: 13px;
        color: #9c9fa1;
      }
    }
  }

  // 右侧地图图标
  .icon-map {
    font-size: 25px;
    color: #fff;
  }
}

显示效果为

获取当前城市

• 使用封装好的方法获取当前城市

componentDidMount () {
  // 获取当前城市名称
  getCurrentCity().then(res =>{
    this.setState({
      currentCity: res.label
    })
  })
}

• 跳转到主页

      <i className="iconfont icon-back" onClick={() => {
            // 控制路由跳转到主页面
            this.props.history.push('/home')
          }}/>