租房项目四

城市选择模块

1、功能分析

• 业务：切换城市，查看该城市下的房源信息
• 功能：1. 顶部导航栏 2. 城市列表展示 3. 使用索引快速切换城市 4. 点击城市名称切换城市
• 第三方组件： react-virtualized 长列表 
• 难点：数据格式处理、react-virtualized组件在项目中的使用

2、顶部导航栏

• 1. 打开 antd-mobile 组件库的 NavBar 导航栏组件 文档 
• 2. 从文档中拷贝组件示例代码到项目中，让其正确运行
• 3. 修改导航栏样式和结构

// 1 导入 NavBar组件
import { NavBar } from 'antd-mobile'  

render() {
    return (
      <div className="citylist">
        {/* 顶部导航栏 */}
        <NavBar
          className="navbar"