菜單導航界面
利用antdmobile組件庫中的Flex布局即可
image
涉及到的問題：
- 1蜻牢，引入圖片，使用import方式
- 2，輪播圖不能自動輪播由于我們是動態(tài)獲取的數(shù)據(jù)载弄，可以加個狀態(tài)判斷，從而顯示輪播圖DOM組件否則展示空即可
- 3撵颊，<Flex.Item>組件單獨抽離出renderNavs方法宇攻，這樣更清晰
- 4，菜單導航跳轉(zhuǎn)后相應的tabBar未高亮倡勇，原因是切換導航時并沒有重新加載Home組件菜單高亮的方法逞刷，即沒有重新執(zhí)行state = {
selectedTab: this.props.location.pathname,
}，解決方案：在路由切換時妻熊，執(zhí)行菜單高亮的方法夸浅，即在componentDidUpdate生命周期里判斷preProps.location.pathname是否不等于this.props.location.pathname，是的話扔役，調(diào)用this.setState({
selectedTab: this.props.location.pathname,
})方法即可帆喇。
在腳手架中使用sass
- 1, 安裝sass: yarn add node-sass或者npm install node-sass --save
- 2, 創(chuàng)建以
.scss或.sass為后綴的文件 - 3, 在組件中導入sass文件
租房小組、最新資訊
租房小組業(yè)務需求：根據(jù)當前地理位置展示不同小組信息
image
這部分沒什么功能點亿胸，代碼也就不貼了坯钦，有需要直接找我就行了哦
搜索模塊
image
H5中的地理位置API
根據(jù)當前地理位置预皇，獲取當前所在城市的房源信息
地理位置可以通過H5的 navigator.geolocation對象提供，通過 getCurrentPosition 方法獲取:
navigator.geolocation.getCurrentPosition(i => {
// i 對象就是當前位置信息
// 常見的：longitude 經(jīng)度婉刀、latitude 緯度
})
此時瀏覽器會彈出獲取你位置的彈窗
image
注意：獲取到的地理位置跟GPS吟温、IP地址、WIFI突颊、藍牙的MAC地址鲁豪、GSM/CDMS的ID有關
比如：手機優(yōu)先使用GPS定位，筆記本等最準確的定位是WIFI
我們拿到了經(jīng)緯度律秃，這時需要配合百度地圖等第三方去獲取城市等信息
百度地圖
H5 的地理位置 api 只能獲取到經(jīng)緯度信息爬橡，在實際開發(fā)中，會使用百度地圖/高德地圖來完成地理位置的相關功能
百度地圖開發(fā)api文檔, （web - JavaScript API）
使用前友绝，需要申請百度賬號和ak堤尾，獲取到ak
image
image
百度地圖使用步驟：
- 1，public > index.html文件中引入百度地圖API的js文件, 替換自己申請好的密鑰(ak)
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密鑰">
- 2迁客，在 index.css中設置全局樣式
html, body, #root, .App {
height: 100%;
}
html, body {
padding: 0;
margin: 0;
}
- 3, 創(chuàng)建 Map 組件郭宝，并創(chuàng)建一個div元素作為地圖容器
render() {
return(
<div className="map">
<div id="container"></div>
</div>
)
}
.map, #container {
height: 100%;
}
- 4,創(chuàng)建地圖實例
componentDidMount() {
const map = new window.BMapGL.Map('container')
}
- 5，設置中心點坐標
const point = new window.BMapGL.Point(116.404, 39.915)
- 6, 初始化地圖掷漱，同時設置展示級別
map.centerAndZoom(point, 15)
獲取頂部導航城市信息
通過IP定位獲取到當前城市名稱, 調(diào)用接口換取項目中的城市信息(有房源的城市的名稱和id),最后將接口返回的城市信息展示在頂部導航欄中粘室。
const curCity = new window.BMapGL.LocalCity()
curCity.get(async res => {
const _res = await axios.get(`http://localhost:8080/area/info?name=${res.name}`)
this.setState({
currentCityName: _res.data.body.label
})
})
image
下篇文章寫城市選擇模塊，如果你學到了哪怕一點卜范，可不可以給個關注哈哈哈衔统，拜托拜托哦！
