菜单导航界面
利用antdmobile组件库中的Flex布局即可
image
涉及到的问题：
- 1，引入图片，使用import方式
- 2，轮播图不能自动轮播由于我们是动态获取的数据，可以加个状态判断，从而显示轮播图DOM组件否则展示空即可
- 3，<Flex.Item>组件单独抽离出renderNavs方法，这样更清晰
- 4，菜单导航跳转后相应的tabBar未高亮，原因是切换导航时并没有重新加载Home组件菜单高亮的方法，即没有重新执行state = {
selectedTab: this.props.location.pathname,
}，解决方案：在路由切换时，执行菜单高亮的方法，即在componentDidUpdate生命周期里判断preProps.location.pathname是否不等于this.props.location.pathname，是的话，调用this.setState({
selectedTab: this.props.location.pathname,
})方法即可。
在脚手架中使用sass
- 1, 安装sass: yarn add node-sass或者npm install node-sass --save
- 2, 创建以
.scss或.sass为后缀的文件 - 3, 在组件中导入sass文件
租房小组、最新资讯
租房小组业务需求：根据当前地理位置展示不同小组信息
image
这部分没什么功能点，代码也就不贴了，有需要直接找我就行了哦
搜索模块
image
H5中的地理位置API
根据当前地理位置，获取当前所在城市的房源信息
地理位置可以通过H5的 navigator.geolocation对象提供，通过 getCurrentPosition 方法获取:
navigator.geolocation.getCurrentPosition(i => {
// i 对象就是当前位置信息
// 常见的：longitude 经度、latitude 纬度
})
此时浏览器会弹出获取你位置的弹窗
image
注意：获取到的地理位置跟GPS、IP地址、WIFI、蓝牙的MAC地址、GSM/CDMS的ID有关
比如：手机优先使用GPS定位，笔记本等最准确的定位是WIFI
我们拿到了经纬度，这时需要配合百度地图等第三方去获取城市等信息
百度地图
H5 的地理位置 api 只能获取到经纬度信息，在实际开发中，会使用百度地图/高德地图来完成地理位置的相关功能
百度地图开发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, 创建 Map 组件，并创建一个div元素作为地图容器
render() {
return(
<div className="map">
<div id="container"></div>
</div>
)
}
.map, #container {
height: 100%;
}
- 4,创建地图实例
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定位获取到当前城市名称, 调用接口换取项目中的城市信息(有房源的城市的名称和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
下篇文章写城市选择模块，如果你学到了哪怕一点，可不可以给个关注哈哈哈，拜托拜托哦！
网友评论