地图找房（四）02——小区房源列表展示和隐藏小区房源列表数据填充接口数据-图片地址的基准路径

地图找房——小区房源列表展示和隐藏 & 小区房源列表数据填充 & 接口数据-图片地址的基准路径

小区房源列表展示和隐藏

通过状态控制列表显示和隐藏

constructor (props) {super(props) this.state = {loaded: false}
}

this.setState({// 获取数据并显示房源列表loaded: true
})

房屋列表

小区房源列表数据填充

列表整体模板

<divclassName={[styles.houseList, this.state.loaded ? styles.show : ''].join(' ')}
><div className={styles.titleWrap}><h1 className={styles.listTitle}>房屋列表</h1><a className={styles.titleMore} href="/house/list">更多房源</a></div><div className={styles.houseItems}>{this.renderHouseList()}</div>
</div>

小区列表单个条目模板

<div className={styles.house}><div className={styles.imgWrap}><img className={styles.img} src="" alt=""/></div><div className={styles.content}><h3 className={styles.title}>{item.title}</h3><div className={styles.desc}>{item.desc}</div><div><span className={[styles.tag, styles[tagClass]].join(' ')}>近地铁</span></div><div className={styles.price}><span className={styles.priceNum}>{item.price}</span> 元/月</div></div>
</div>

房源列表详情信息

实例

引入图片地址的基准路径

import { getCurrentCity, API_BASE_URL } from '../../utils/index.js'

结构

  renderHouseList = () => {// 动态生成房源列表模板return this.state.houseList.map(item => {return (<div key={item.houseCode} onClick={() => {// 控制路由跳转到房源详情页面this.props.history.push('detail/' + item.houseCode)}} className={styles.house}><div className={styles.imgWrap}><img className={styles.img} src={API_BASE_URL + item.houseImg} alt=""/></div><div className={styles.content}><h3 className={styles.title}>{item.title}</h3><div className={styles.desc}>{item.desc}</div><div>{item.tags.map((tag, index) => {// 保证i值从1-3进行变化，因为tag标签类名有三个let i = (index + 1) % 3 === 0? 3: (index + 1) % 3let tagClass = 'tag' + itagClass = styles[tagClass]return (<span key={index} className={[styles.tag, tagClass].join(' ')}>近地铁</span>)})}</div><div className={styles.price}><span className={styles.priceNum}>{item.price}</span> 元/月</div></div></div>)})}

地图找房（四）02——小区房源列表展示和隐藏小区房源列表数据填充接口数据-图片地址的基准路径相关推荐

地图找房（五）01——移动小区到地图中心
地图找房--移动小区到地图中心计算点击覆盖物移动的距离 // 点击位置坐标 const { clientX, clientY } = e.changedTouches[0] // 移动距离 cons ...
腾讯地图实现地图找房功能
链家实现的效果最近接到一个需求,需要使用鹅厂地图实现类似链家网的地图找房功能,然后我去网上看了一下,基本上使用的都是百度地图.于是我打算自己稍微封装一下,可以在使用的时候更加的方便. 01. 分析 ...
java地图完整项目-地图找房（基于百度地图-MongoDB）
1.BMapGLLib库网址: GitHub - huiyan-fe/BMapGLLib: 百度地图JSAPI GL版JavaScript开源工具库该库相关辅助功能可通过点击上述网址进行查看! 2 ...
高德地图找房 # 编程大实践 # Python # 嵩天 # cilay
高德地图找房一.项目背景 1.高德开放平台高德开放平台是国内技术领先的LBS服务提供商,拥有先进的数据融合技术和海量的数据处理能力. 服务超过三十万款移动应用,日均处理定位请求及路径规划数百亿次. ...
Java开发导入腾讯地图描点_腾讯地图点聚合开发-实现地图找房功能
链家实现的效果分析链家的地图找房主要分为三层.第一层为市区层,比如南山.罗湖等:第二层为片区,比如南头.科技园等:第三层则为小区. 因为第一层,第二层的数据没有那么多,这两个接口都是把所有的数据一 ...
腾讯地图点聚合应用之地图找房
链家实现的效果分析地图找房功能使用点聚合来实现的.官网示例如下:https://lbs.qq.com/javascript_v2/sample/overlay-markercluster.html ...
用vue仿贝壳地图找房功
用vue仿贝壳地图找房功能主要实现: 通过baidu-map 实现鼠标滚动缩放地图级别,同时控制行政区划气泡的展示和隐藏: 放大地图,行政区划气泡消失,同时展示改行政区划下面的房源信息,我这里展示的是 ...
百度地图——地图找房功能
代码地址:https://github.com/huiyan-fe/BMapGLLib HouseSearchService层 package cn.itcast.baidumap. ...
python + 高德地图API实现地图找房
python + 高德地图API实现地图找房项目简介:根据工作地点信息和58同城爬取的租房信息,通过高德地图进行显示,同时利用高德API自动规划房源到工作地点的通勤路线(公交+地铁) 项目仓库:ht ...
仿链家地图找房_全网稀缺，完整链家地图找房的实现(一)
前一段时间我应公司的需求开发了类似链家地图找房的功能,然而我发现现在市面上,对于链家地图找房功能的完整实现相关的文章还是比较稀缺的,亦或是功能还不够完善,出于这个方面,我觉得把自己对于链家地图找房功能 ...

地图找房（四）02——小区房源列表展示和隐藏小区房源列表数据填充接口数据-图片地址的基准路径

地图找房——小区房源列表展示和隐藏 & 小区房源列表数据填充 & 接口数据-图片地址的基准路径

小区房源列表展示和隐藏

小区房源列表数据填充

实例

地图找房（四）02——小区房源列表展示和隐藏小区房源列表数据填充接口数据-图片地址的基准路径相关推荐

最新文章

热门文章

地图找房（四）02——小区房源列表展示和隐藏 小区房源列表数据填充 接口数据-图片地址的基准路径

地图找房——小区房源列表展示和隐藏 & 小区房源列表数据填充 & 接口数据-图片地址的基准路径

小区房源列表展示和隐藏

小区房源列表数据填充

实例

地图找房（四）02——小区房源列表展示和隐藏 小区房源列表数据填充 接口数据-图片地址的基准路径相关推荐

最新文章

热门文章

地图找房（四）02——小区房源列表展示和隐藏小区房源列表数据填充接口数据-图片地址的基准路径

地图找房（四）02——小区房源列表展示和隐藏小区房源列表数据填充接口数据-图片地址的基准路径相关推荐