reatc移动端的"选择城市列表"页面的渲染

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 12 天，点击查看活动详情

• 在项目中很多时候都会有地区的列表的选择，今天就来总结一下这个页面的实现。
• 先看一下例子：

• 这是移动端的react项目，结合的是antd mobileUI库进行的页面构建。顶部使用的就是<NavBar/>。

• onBack事件就是左上角的<返回事件。
• 首先，这个页面的结构是分为左右两半部分的，左边使用的是react-virtualized这个插件里的<AutoSize/>组件里的<List/>。

• 在进行渲染之前，是先把请求回来的数据进行了处理，请求回来的格式如下：

• 热门城市的数据是通过接口请求回来的，也要记得把热门城市的数据添加到cityList数组里，以及当前定位城市。当前定位城市可以利用百度地图的定位接口实现，在这里就不给大家举例了，大家可以去参考百度地图。
• 每一行的高度不是固定的，应该是动态渲染，每一行的高度应该是每一行的索引(A)+以A开头的城市高度*城市个数，可以先固定一个每一行索引高度是36，每一个城市高度是50。具体代码实现如下：

• 这个方法里的index是<List/>这个组件的rowHeight属性里自动接收到的。cityIndex[index]可以找到当前城市首拼是以a,b,c...哪个字母开头的，拿到字母，在通过cityList这个城市列表的数据拿到对应的城市数组。
• 右侧的索引列表可以通过<ul>进行渲染即可。实现就是遍历cityIndex这个数组，渲染出对应的dom结构。 以上呢就是给大家分享的简单的城市选择布局的实现。其实还有点击右侧左边对应的字母到达页面的最上面，这个实现思路可能很多人都认为是点击左侧的字母，左侧发生对应的滚动，然而实现的话应该是滚动左侧的城市，让右侧的索引样式发生变化。但首先要开启<List/>组件的 scrollToAlignment="start" //这个属性值的作用是点击右侧索引，左侧索引可以到顶部。等有时间的话在把这个事件进行补充吧，今天先写页面布局的实现。