本文共 618 字，大约阅读时间需要 2 分钟。

列表找房模块

 

2.1 功能分析

业务：根据查询条件筛选房源列表。 功能：  搜索导航栏组件封装  条件筛选栏组件封装  条件筛选栏吸顶功能  房屋列表 难点： 条件筛选组件的封装、房屋列表处理。

2. 列表找房模块 2.2 顶部搜索导航栏 1. 封装首页搜索导航栏 1. 在 components 目录中创建组件 SearchHeader/index.js。 2. 在该组件中，复用首页中已经实现的结构、样式来封装组件。

2. 列表找房模块 2.2 顶部搜索导航栏 2. 实现找房页面搜索导航栏 1. 在找房页面 SearchHeader 组件基础上，调整结构（添加返回icon等）。 2. 给 SearchHeader 组件传递 className 属性，来调整组件样式，让其适应找房页面效果。

2. 列表找房模块 2.3 条件筛选栏 1. 组件结构分析  父组件：Filter。  子组件：FilterTitle 标题菜单组件。  子组件：FilterPicker 前三个菜单对应的内容组件。  子组件：FilterMore 最后一个菜单对应的内容组件。  FilterPicker 内容组件中，使用 antd-mobile 组件库的 PickerView 选择器组件。  <></> 语法是<React.Fragment> 的简化语法，作用：不添加额外元素，返回多个节点。

<React.Fragment>

<

转载地址：https://blog.csdn.net/yexiangCSDN/article/details/117334552 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！