为什么要写这篇文章
曾使用此属性实现日历的自动滚动,如果在已经渲染好的条件下滚动方法没有一点毛病,但若想滚动到渲染区外就有些坑了,网上不少教程虽都有所提及,但实现的也不是很完美,今天有时间便好好研究一下,写一下自己的理解,希望铁子们能够用到。
RN官网对ScrollToLocation的解释
将可视区内位于特定sectionIndex 或 itemIndex (section内)位置的列表项,滚动到可视区的制定位置。比如说,viewPosition 为0时将这个列表项滚动到可视区顶部 (可能会被顶部粘接的header覆盖), 为1时将它滚动到可视区底部, 为0.5时将它滚动到可视区中央。
注意: 如果没有设置getItemLayout或是onScrollToIndexFailed,就不能滚动到位于外部渲染区的位置。
ScrollToLocation参数理解
this.mySectionList.scrollToLocation(
{animated: true,
itemIndex: 2,
viewOffset:100,
sectionIndex: 1});
animated:是否开启滚动动画,true为开启,false为关闭。
sectionIndex:滚动到第几个section,0代表第一个,1代表第二个,以此类推。
itemIndex:滚动到第几个item,这是相对于当前section来表示的,0代表当前section的第一个item,也就是头部组件!!
viewOffset:滚动到第几个section的第几个item后仍需持续偏移的偏移量,正数为向下滚动,负数为向上滚动
例如我写的这个就是为了滚动到第二个section的第三个item上。
getItemLayout 大坑就在这里
getItemLayout={(data, index) => {
return {
index: index,
offset: 150 * (index-(index%5==0?0:1)-parseInt(index/5))
+ 25*(parseInt(index/5)+(index%5==0?0:1)),
length: index%5==0 ? 25 : 150,
}
}}
当sectionList还未渲染完成时调用scrollToLocation必须添加此方法,告诉RN需要滚动到什么位置。
- 入参data为全部section的数据。
- 入参index为所有item的角标,就我写的这个小例子来说,0为第一个section的header,1为第一个section的第一个item,5为第二个section的header,以此类推。
- 返回值中的offset是你要告诉RN当前index需要滚动多少像素,坑就坑在这个计算方式上,还是以上图为例,很明显每个section有5个item,header的高为25,普通item的高为150,所以偏移量应当为前面section里的所有普通item高度和所有头部item高度
- 返回值length为每个item的高度,要区分头部和普通item高度。
如果未明确算好offest,就会出现一些神奇的问题,有时候滚的对有时候又不对-_-!