地圖找房——小區房源列表展示和隱藏 & 小區房源列表數據填充 & 接口數據-圖片地址的基準路徑

小區房源列表展示和隱藏

• 通過狀態控制列表顯示和隱藏

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——小区房源列表展示和隐藏 小区房源列表数据填充 接口数据-图片地址的基准路径的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。