React Native
中的SectionList
组件有scrollToLocation
方法,可以传递sectionIndex
、itemIndex
、viewOffset
进去,达到滚动到SectionList
的某一位置之目的。
例如以下代码可以将SectionList
滚动到第三个section
的第三个index
,并且继续偏移30像素的位置:
this.sectionList.scrollToLocation({
sectionIndex: 2,
itemIndex: 2,
viewOffset: 30,
})
....
ref={ref => this.sectionList = ref}
/>
但是如果要调用
scrollToLocation
的时候很可能页面还没渲染好,RN
并不知道需要滚动到哪个位置,这个时候需要配合getItemLayout
来使用。如果在sectionList
中使用了该属性,RN
会调用此方法计算列表中各项的显示位置,从而提前得知怎么处理滚动。...
getItemLayout={(data, index) => ({
index,
offset: OFFSET_FROM_TOP,
length: ITEM_HEIGHT.
})
}
/>
getItemLayout
接收两个参数: 第一个参数是所有的渲染数据,即传递给sections
属性的数据;第二个参数是渲染元素在所有渲染元素中的位置(数组中的索引)。返回一个对象,该对象包含index
: 元素索引位置信息, offset
: 该元素距离列表顶部的距离, length
: 该元素自身的高度。怎么理解index?????
index
是某元素在SectionList
所有元素中的索引下标,这里所有元素包括:包括sectionHeader
,sectionFooter
,item
;
意味着如果传递给一个SectionList的数据是这样的:
[{
title: 'Section 0',
data: ['item 0-0', 'item0-1', 'item0-2'],
},
{
title: 'Section 1',
data: ['item 1-0', 'item1-1', 'item1-2'],
}]
那么index为0的时候应该返回第一个section的sectionHeader位置信息!!!
index为1的时候,返回第一个section的第一个item的位置信息
index为4的时候,返回第一个Section的sectionFooter位置信息
index为6的时候,才是第二个Section的第一个元素的位置信息
了解了index的含义才能计算好itemLayout。
【scrollToLocation和getItemLayout】在sectionList中计算itemlayout是件很艰难的事情,而且局限于知道列表中各种元素的尺寸的情况下才能计算准确。
github中有一个库来帮忙做这件事情:
rn-section-list-get-item-layout
推荐阅读
- 操作系统|[译]从内部了解现代浏览器(1)
- web网页模板|如此优秀的JS轮播图,写完老师都沉默了
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- vue.js|vue中使用axios封装成request使用
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- JavaScript|JavaScript之DOM增删改查(重点)
- javascript|vue使用js-xlsx导出excel,可修改格子样式,例如背景颜色、字体大小、列宽等
- javascript|javascript中的数据类型转换