ReactNative开发城市列表页

栏目: IOS · 发布时间: 5年前

内容简介:页面包含当前定位,热门城市,全国的城市列表。其中全国城市列表页带字母分类,右侧带有字母索引讲道理,要完成这个需求,我能想到的是城市列表如何实现?ScrollView、FlatList、SectionList。当然经过思考后,首先想到的是用SectionList来完成,所以第一版出来的效果是SectionList组件完成的页面。但是,这时候遇到了个问题,因为全国城市的数量过多,在SectionList渲染完可视的页面后,点击右侧索引跳转到对应的字母区域的滚动效果不太好,而且会有空白的渲染问题。

页面包含当前定位,热门城市,全国的城市列表。其中全国城市列表页带字母分类,右侧带有字母索引

讲道理,要完成这个需求,我能想到的是城市列表如何实现?ScrollView、FlatList、SectionList。

当然经过思考后,首先想到的是用SectionList来完成,所以第一版出来的效果是SectionList组件完成的页面。但是,这时候遇到了个问题,因为全国城市的数量过多,在SectionList渲染完可视的页面后,点击右侧索引跳转到对应的字母区域的滚动效果不太好,而且会有空白的渲染问题。

不过在使用支付宝APP的里面定位功能时候,加载和跳转索引都非常流畅,我就好奇是怎么实现的了。肯定不是使用SectionList,Google后相关资料后尝试了用ScrollView做了第二版,最后的结果如支付宝的组件版顺畅。

ScrollView版的城市列表

首先看页面布局,全国城市列表的数据自己查找一份,数据格式自己处理了一遍,大概是这个格式。之所以转化成这样是因为第一版用SectionList的数据源必须是这种格式,包含key和data(必须是这个名字)

城市列表JSON数据图片

ReactNative开发城市列表页

页面布局的代码如图

页面布局代码

ReactNative开发城市列表页

详细的参考代码去吧,接下来聊聊实现思路

开发思路

  1. 获取字母表头(索引数组)

我们可以通过遍历来获取大写字母

_gotLettersArray() {

let LettersArray = []

for (let i = 0; i < cityDatas.length; i++) {

let element = cityDatas[i];

LettersArray.push(element.title)

}

return LettersArray

}

复制代码
  1. 获取每个字母区域的高度

首先定义一个空数组用于存放每个字母区域的高度,其次初始化一个变量,其值与没个城市列表的高度相同,最后遍历得到没个区域的高度并将其放进去,这样便得到一个完整的储存高度的数组了

_gotTotalHeightArray() {

let totalArray = []

for (let i = 0; i < cityDatas.length; i++) {

let eachHeight = ROW_HEIGHT * (cityDatas[i].data.length + 1);

totalArray.push(eachHeight);

}

return totalArray

}

复制代码
  1. 点击右侧字母自动滑动到相应位置

当我们点击右侧字母时进入点击事件,通过scrollTo()使页面跳转到相应下标的高度上去。

scrollToList(item, index) {

let position = 0;

for (let i = 0; i < index; i++) {

position += totalHeight[i]

}

this.refs.ScrollView.scrollTo({y: position})

}

复制代码

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

思想的未来

思想的未来

(美)劳伦斯﹒莱斯格 / 李旭 / 中信出版社 / 2004-10 / 29.00元

因特网革命已到来,一些人说它已经过去,革命缘何而来?又缘何而去呢? 劳伦斯·莱斯格对因特网革命中为何会出现一种反革命的破坏性力量及后果做出了解释。创作之所以繁荣,是因为因特网保护了创新的公共资源。是因为因特网保护了创新的公共资源。因特网的独特设计营造出一个中立的平台。最广大范围的作者们可在此平台上进行试验。围绕此平台的法律架构对这一自由空间给予了保护,以使文化和信息——我们这个时代的......一起来看看 《思想的未来》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具